prefix on css variables

[mimmi20]

We are using Bootstrap at the moment and trying to replace it with tailwind. We are prefixing all css classes in Bootstrap to avoid conflicts in a historic grown mix of CSS from different projects which can not be solved at the moment.

To get also everything prefixed, we are using a prefix for tailwind and another prefix for daisy UI. When the CSS is generated, the CSS variables from tailwind have a prefix, the CSS variables from Daisy UI have not.

Is there an additional setup required to prefix also the CSS variables from Daisy UI?

We are using tailwindcss 4.1.13 with daisyui 5.0.51.

our css file

@layer theme, base, components, utilities, project;

@import "tailwindcss/theme.css" layer(theme) prefix(atb);
@import "tailwindcss/preflight.css" layer(base) prefix(atb);
@import "tailwindcss/utilities.css" layer(utilities) prefix(atb);

@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
    root: ":root";
    logs: true;
    prefix: "d-";
}

...

The colors to use now are for example

--atb-color-gray-50: #eaebed;

and

--color-base-100: #000;

I would prefer to have a CSS variable like --atb-color-base-100: #000;

[saadeghi]

Hey,

Color variables are in direct control of Tailwind CSS and we can't add prefix to them.
If you add a prefix to Tailwind CSS instead of daisyUI, they will have prefix.

Let me know if you have a question.

[mimmi20]

This is not limited to Colors. As I mentined, all CSS-Variables related to DaisyUI dont have the tailwind prefix, while all CSS-Variables related directly to Tailwind have one. There are some CSS-Variable who got the daisy-UI-Prefix.

https://play.tailwindcss.com/rc5UPZjzyS?file=css

[saadeghi]

For reference:
These are component-specific CSS variables. They get prefix from daisyUI.

Theme variables won't get prefix from daisyUI. They are mostly the ones that are sent to Tailwind CSS @theme directive so Tailwind CSS can generate utility classes from them.
For example, if we add a daisy- prefix to --color-base-100 Tailwind CSS will generate the utility class name like color-daisy-base-100 which is not ok.

Let me know if you have a question.