Next.js Discord

Discord Forum

Tailwind’s dark: classes not working

Answered
Albacore posted this in #help-forum
Open in Discord
AlbacoreOP
I have a button on my website with bg-amber-400 dark:bg-blue-400. However, it's always blue, regardless of the current theme.
My theme button does onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}, and I also properly adjusted my globals.css and layout.tsx.
This is my first ever website, and I'm not entirely familiar with Next.js/Tailwind/CSS/HTML yet, so maybe I'm forgetting something important.
Answered by LuisLl
I can’t open your globals.css for some weird reason but make sure you have this configured:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));
View full answer

19 Replies

AlbacoreOP
This is my globals.css, I think that's also correct.
That's my layout.tsx with the Theme Provider.
And I just deleted my tailwind.config.ts, because I saw this post: https://nextjs-forum.com/post/1391947325986832474
But I didn't even really use or understand it, so this shouldn't really matter.
LuisLl
I can’t open your globals.css for some weird reason but make sure you have this configured:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));
Answer
@LuisLl I can’t open your globals.css for some weird reason but make sure you have this configured: css @import "tailwindcss"; @custom-variant dark (&:is(.dark *));
AlbacoreOP
This is the file, does this already cover it?

@import "tailwindcss";

:root {
  --background: #F7F5FF;
  --foreground: #1A1A1C;
}

html.light {
  --background: #F7F5FF;
  --foreground: #1A1A1C;
}

html.dark {
  --background: #1A1A1C;
  --foreground: #F7F5FF;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
Add that like and it should work
AlbacoreOP
Omg it works, the problem I've had for the past 2 days has been fixed with 1 line of code :lolsob:
LuisLl
Also, you don’t need to html.light and html.dark

You simply need this, :root targets your html document and .dark is just a class that’s gonna be applied whenever your html gets the class “dark” added when the theme is dark 

:root {} 
 
.dark{}
Makes sense?
You’re good to remove the html.light and the tokens set up in :root will be the default for light
@LuisLl Makes sense?
AlbacoreOP
Ohh, that makes sense :ApuOkay:
Thanks you so much lol
LuisLl
No problem
@LuisLl No problem
AlbacoreOP
Wait, about the tailwind.config.ts, is there anything from it that I need to add in my globals.css?
LuisLl
If you’re in Tailwind v4+ the tailwind.config.ts file is deprecated.

You no longer need it, all the config is now made in the .css files instead, your whole tailwind set up and config is now CSS native,
AlbacoreOP
I see :Noted:
LuisLl
If you have some configs and tokens set up in your config file, you can still reference that file in your .css.

@config "../../tailwind.config.ts";


https://tailwindcss.com/docs/functions-and-directives#config-directive
AlbacoreOP
Thank you very much <3