How to target @theme properties with a data-theme attribute #16292
-
|
First up, thanks for Tailwind v4 - it's a huge step forward in so many ways! But having an issue I hope someone can help with. Reproductionhttps://play.tailwindcss.com/qHz48chxJN?file=css Steps to Replicate
The results:
IssueUnfortunately the data attribute doesn't appear to affect the scope of @theme { ... }
[data-theme="theme-example"] {
@theme { ... }
}This is how Tailwind seems to interpret it, and the last @theme { ... }
/* [data-theme="theme-example"] { */ /* <-- ignored */
@theme { ... } /* <-- takes precedence*/
/* } */Note that I have tried a number of alternatives, but to no avail. @theme {
[data-theme="..."] { ... }
}@theme [data-theme="..."] { ... }[data-theme="..."] @theme { ... }Note this does work, but not with the [data-theme="..."] { ... }Use CaseMy goal is essentially this:
Here's how I was imaging a minimal app.css to look: @import "tailwindcss";
@import "theme-base.css";
@import "theme-one.css";
@import "theme-two.css";Then [data-theme="theme-one"] {
@theme { ... }
}Then when the <html data-attribute="theme-one">...<html><html data-attribute="theme-two">...<html>I realize this is using a combination of cutting edge features between Tailwind and CSS, but is there any way to correctly target the the scope of the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Hey! Here's a working demo: https://play.tailwindcss.com/zII7ezcIPC?file=css @import "tailwindcss";
@theme {
--color-foo-500: red;
}
[data-theme="theme-one"] {
--color-foo-500: green;
}
[data-theme="theme-two"] {
--color-foo-500: blue;
}Does that do what you want? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @adamwathan thank you for the quick response. Unfortunately I just realized my reproduction was not showing the full scope of the issue. I was just posting my update when you responded! What you presented totally works, but for some reason fails when paired with colors that use https://play.tailwindcss.com/qHz48chxJN?file=css I realize colors may not be intended to work like that, but it would be amazing if they did! |
Beta Was this translation helpful? Give feedback.
-
|
This kinda works, but defeats the purpose of variables if we have to redefine them over and over: |
Beta Was this translation helpful? Give feedback.
-
|
Got it, this is what you want if I understand correctly: https://play.tailwindcss.com/cFA2dv7G0P?file=css Key thing is the https://tailwindcss.com/docs/theme#referencing-other-variables |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Looks like I'll need to tinker with |
Beta Was this translation helpful? Give feedback.
Got it, this is what you want if I understand correctly:
https://play.tailwindcss.com/cFA2dv7G0P?file=css
Key thing is the
inlineoption:https://tailwindcss.com/docs/theme#referencing-other-variables