[v4] How to handle css configuration for css variables defined based on a data-theme attribute #15199

benebene84 · 2024-11-26T17:11:42Z

benebene84
Nov 26, 2024

Hi everyone,

currently we are trying to migrate a design system to use the tailwind v4 beta. Up until now, the theming is done with css variable that are loaded based on a data-theme property on the body to enable different themes for this design system.

<body data-theme="theme-xyz">
</body>

[data-theme="theme-xyz"] {
...
--primary-main: #81ADC8;
...
}

In Tailwind v3 it was possible to define a custom color in the config file:

colors: {
'ds-primary-main': 'var(--primary-main)'
}

This also works if I use the @config directive and specify the old tailwind config. It generates the class and loads the variables based on the data-theme property.

However, if I try to migrate this to the css configuration, this is not working, because the css-variable is not known where it is referenced by tailwind:

It works if I remove the data-theme selector and add them to :root in the css, but this would make it hard to maintain for applications relying on multiple themes.

Is there any way around it?