Replies: 5 comments 17 replies
-
|
Related:
Based on the linked documentation, I would structure your code like this in v4: @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant sky-light (&:where(.sky-light, .sky-light *));
@custom-variant sky-dark (&:where(.sky-dark, .sky-dark *));
@theme {
--color-app-background: hsl(210 20% 98%);
}
@layer theme {
:root, :host {
@variant dark {
--color-app-background: hsl(216 13% 15%);
}
@variant sky-light {
--color-app-background: hsl(210 20% 98%);
}
@variant sky-dark {
--color-app-background: hsl(216 13% 15%);
}
}
}Tip I created another playground using @crswll's approach that better demonstrates using themes on the "root" element (since the playground doesn't allow direct manipulation of the Of course, you can use OKLCH colors instead of HSL colors - I just didn't feel like converting them. Themes:
I don't want to repeat myself too much since there are already plenty of write-ups about this on GitHub and Stack Overflow. In v4, the JS config was removed, so to switch the |
Beta Was this translation helpful? Give feedback.
-
|
From the docs: This lets you write utilities theme-midnight:bg-black and theme-midnight:text-white. This is not what I want; I don't think creating custom variants for all my themes is the way to go. In my className i need ONE custom utility class, E.g. bg-app-bg, and when I change the theme in my theme selector, a different bg color should be applied. The theme selector sets the selector class in the html element's class attribute. |
Beta Was this translation helpful? Give feedback.
-
|
You can skip the variant declaration as far as I'm concerned. I was just showing a much more functional solution. @import "tailwindcss";
@theme {
--color-app-background: hsl(210 20% 98%);
}
@layer theme {
:root, :host {
&:where(.dark, .dark *) {
--color-app-background: hsl(216 13% 15%);
}
&:where(.sky-light, .sky-light *) {
--color-app-background: hsl(210 20% 98%);
}
&:where(.sky-dark, .sky-dark *) {
--color-app-background: hsl(216 13% 15%);
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
And if you want it to work in nested contexts as well, I recommend understanding the difference between @import "tailwindcss";
@theme {
--color-app-background: hsl(210 20% 98%);
}
@layer theme {
* {
&:where(.dark, .dark *) {
--color-app-background: hsl(216 13% 15%);
}
&:where(.sky-light, .sky-light *) {
--color-app-background: hsl(210 20% 98%);
}
&:where(.sky-dark, .sky-dark *) {
--color-app-background: hsl(216 13% 15%);
}
}
}or @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant sky-light (&:where(.sky-light, .sky-light *));
@custom-variant sky-dark (&:where(.sky-dark, .sky-dark *));
@theme {
--color-app-background: hsl(210 20% 98%);
}
@layer theme {
* {
@variant dark {
--color-app-background: hsl(216 13% 15%);
}
@variant sky-light {
--color-app-background: hsl(210 20% 98%);
}
@variant sky-dark {
--color-app-background: hsl(216 13% 15%);
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
I believe the misunderstanding came from the fact that you didn't actually test my CSS code locally - you just glanced at it in the playground and dismissed it because I included a variant declaration while also answering your question at the same time. In the playground, I don't have access to the |
Beta Was this translation helpful? Give feedback.
-
|
If you take a look, I used firstly
|
Beta Was this translation helpful? Give feedback.
-
|
Your suggestion does not show how it addresses the following:
How would that work with what you suggested? |
Beta Was this translation helpful? Give feedback.
-
|
It does exactly that: it declares one color named <html class="dark">
<body>
<div class="bg-app-background">...</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
While I would declare the variants myself by |
Beta Was this translation helpful? Give feedback.
-
|
Anyone got some insights? |
Beta Was this translation helpful? Give feedback.
-
|
@spacecat I came looking for a similar answer, and the suggestion above works. You didn't test the solution in the tailwind playground. It is actually what you want. This is the HTML structure. It uses one class, 
|
Beta Was this translation helpful? Give feedback.
-
|
You will use a final div in your app and change its class. The person who replied to you above was just demonstrating how theming works. This is the final version: const theme = "sky-dark"; // or any other theme you define
const App = () => {
return (
<html className={theme}>
<div className="bg-app-background" />
</html>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
@HasanMothaffar Thanks! <3 |
Beta Was this translation helpful? Give feedback.
-
|
@spacecat My code does exactly that. I think you just skimmed through the playground and dismissed the answer, even though it works. I simply left the conversation unfinished because I felt I had said everything that needed to be said. The solution is valid and functional - for The Tailwind Playground doesn't allow me to manipulate the global HTML tag, so I demonstrated it using 4 divs as "4 different pages", just an example for themeName using. |
Beta Was this translation helpful? Give feedback.
-
|
@rozsazoltan In the past I've put things like this on the root element in a Tailwind Play: <-- remove underscores to try different themes -->
<div class="_dark _hot-dog-stand _square">This was an example for a plugin I wrote for themes for tailwind <= v3: https://play.tailwindcss.com/UlIObQV7vR |
Beta Was this translation helpful? Give feedback.
-
|
@crswll Hm. I like your approach. Thanks for sharing! |
Beta Was this translation helpful? Give feedback.
-
|
So I have this and it works fine in TailwindCSS v4: Now I'm trying to use @adamwathan Could you please share some insight regarding this topic? |
Beta Was this translation helpful? Give feedback.
-
|
You've overcomplicating this. The first code block is fine. There's no real reason for Also little tip, you can do |
Beta Was this translation helpful? Give feedback.
-
|
Yeah. My example was aimed at cases where you might need variants too. Of course, you mentioned you don't, and I also shared examples without variants - I absolutely agree: your first code is perfectly fine, it all depends on the goal. The The utility-scoped color declaration is a smart insight from crswll - it allows you to limit the usage scope of a color effectively. |
Beta Was this translation helpful? Give feedback.
-
Nice tip! Is this documented in v4 docs? I can't recall seeing this and I've read the docs tons of times. |
Beta Was this translation helpful? Give feedback.
-
|
It's not, yet, at least. I opened a PR that does it (but I don't think too well). I'm sure it's something that's being thought of. I created this mostly for myself which might be useful to you: https://gist.github.com/crswll/7506a92863176927cff48aa11d88224a |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
In my Next.js 15/TailwindCSS v3 app i have 11 themes. 5 dark ones and 6 light ones. I'm planning on upgrading to TailwindCSS v4.
The structure looks likes this:
How would this look in v4?
Something like this?
Should I use
@layer themeor@layer baseto put:root,.dark,.sky_light,.sky_dark, etc ?Is nesting variables in properties in
@layer themelegal?Beta Was this translation helpful? Give feedback.
All reactions