How to access daisy ui colors

[H1Mohamed]

I really wonder if there is a way to access the daisy ui colors(aka primary, secondary, accent ...) as variables inside of style tags or post css files?

[saadeghi]

Yes, CSS variables are in this file which you can access from node modules:
https://unpkg.com/browse/daisyui@4.12.2/dist/themes.css

And the CSS variables for the themes you enabled are also available on your CSS file in the browser, set to the root element.

Use this table to see which CSS variable is for which color name:
https://daisyui.com/docs/colors/

Let me know if you have any questions.

[H1Mohamed]

I want to use the color variables inside a gradient as a background of an element, that is it, thanks for the help!

[saadeghi]

Here are some examples of using color CSS variables in gradients:
https://play.tailwindcss.com/DzA9Leqif3

daisyUI colors reference for CSS variables: https://daisyui.com/docs/colors/
Tailwind CSS gradient docs: https://tailwindcss.com/docs/gradient-color-stops

Let me know if you have a question.

[H1Mohamed]

Thank you very much for your help, but could you tell me where and how can I import those variables into my svelte file to use in normal style tags? thank you upfront for your help

[saadeghi]

I wouldn't advice encapsulating styles of a Tailwind CSS project inside framework components. The benefit of Tailwind CSS is reusing class names but if you use styles as modules the framework generates new class name for each style which is not efficient.

But if you want to do that, you can simply use the daisyUI CSS variables like any other CSS variable. They are global and can be accessed anywhere in your app.

[H1Mohamed]

thank you for the advice, I'm just new to tailwindcss and I'm not that used to how you code things in it. Thank you very much for your help and I'll try my best to work with your advice