Next.js Discord

Discord Forum

How does light dark globals.css color scheme work in tailwind v4?

Unanswered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Southeastern blueberry beeOP
Hi everyone I'm struggling to get my light dark mode working using latest next js and tailwind v4

Im used to have a light and dark palette via root: {} in globals.. since there is no tailwind config file anymore, how does it work in my app right now? for example bg-background is not working light dark mode using next themes/theme-toggle anymore..

Any help would be appreciated

27 Replies

LuisLl
The tailwind.config.js file was deprecated in favor of a .css file config. It’s usually your globals.css.
And it still uses the :root selector to declare variables. The difference is you now need to provide @theme inline {} for your tokens that are consuming the variables declared inside :root

For the migration from v3, check [Tailwind v4 migration guide](https://tailwindcss.com/docs/upgrade-guide)

If you’re using shadcn/ui check their [Tailwind v4 guide](https://ui.shadcn.com/docs/tailwind-v4)
LuisLl
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  …
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  …
}

@theme inline {
  /* fonts variables go here  */
  /* --font-sans: var(...);   */
  /* --font-mono: var(...);   */

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  …
  }
LuisLl
It works good with Next themes, maybe you’re not setting the proper configuration to pick the dark clases.
@custom-variant dark (&:is(.dark *));


Oklch is just the new recommended color scheme, that’s all,
@LuisLl It works good with Next themes, maybe you’re not setting the proper configuration to pick the *dark* clases. css @custom-variant dark (&:is(.dark *)); `Oklch` is just the new recommended color scheme, that’s all,
Southeastern blueberry beeOP
Thanks for the help, normally i work like this. for some reason its not working properly anymore while using the v4 docs i cant get it to work.. Im a noob sorry

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Urbanist:wght@500;600;700;800&display=swap");

&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;

@layer base {
:root {
/* Fonts /
--font-primary: "Poppins", sans-serif;
--font-secondary: "Urbanist", sans-serif;

/ Colors /
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 247 100% 70%; / Aangepast naar #7469FF /
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
.....
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 247 100% 70%; / Aangepast naar #7469FF /
--primary-foreground: 0 0% 98%; / Light text for primary buttons /
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%; / Light text for secondary buttons */
--muted: 0 0% 14.9%;
....
}
}
LuisLl
Did you try the codemon they have to make the updates?
@LuisLl That’s the v3 set up
Southeastern blueberry beeOP
Yeah and I just dont understand how light dark works compared to v4.. can i still use the backgroudn foreground like this light dark?
LuisLl
Now your color tokens have defined inside the hsl() or oklch() function.

Instead of just doing
—foreground: 0 0% 98
now do this:
—foreground: hsl(0 0% 98%)
Move the :root and .dark selectors outside of the @layer base
LuisLl
@Southeastern blueberry bee any updates?
@LuisLl <@562344517475237910> any updates?
Southeastern blueberry beeOP
I'm too nooby for this + im a vibecoder and llms dont understand any of this new stuff so not really.. but I believe u provided the right answer so
LuisLl
Don’t mark the solution just yet, I’m trying to help you. What are you stuck with? Like the first issue you’re encountering
Are you using Shadcn/ui btw?
Southeastern blueberry beeOP
LuisLl
Okay, that'a a pretty normal v3 config.
Have you already tried with this codemon:
npx @tailwindcss/upgrade
Southeastern blueberry beeOP
I've seen it yeah, but im def not going to do that in my main project.. What will change if I do that?
@Southeastern blueberry bee I've seen it yeah, but im def not going to do that in my main project.. What will change if I do that?
LuisLl
Move to a different branch and run this command. It won't affect your main branch unless you merge the changes
Southeastern blueberry beeOP
Yeah or i can do it on a different existing fairly new project same v3 workflow
LuisLl
Here you can see what It will try to do. Depending on how complex your config is it might fail, but your config looks pretty normal, it should work. https://tailwindcss.com/docs/upgrade-guide
Southeastern blueberry beeOP
I just dont understand where that root: configuration must happen now, or just in the globals? because i did that and it did not seem to work properly for al the bg-foreground etc...
@Southeastern blueberry bee Yeah or i can do it on a different existing fairly new project same v3 workflow
LuisLl
Whatever works for you, just saying, if you make a new branch off your main branch and then you don't want the changes to affect you, then don't merge the branch and just delete it
LuisLl
All the config will be in your globals.css file.
:root{
}
.dark{
}

The :root and .dark selectors will persist, but you'll have to pull them outside of @layer base{}
Let me know if you encounter any more issues
@Southeastern blueberry bee I just dont understand where that root: configuration must happen now, or just in the globals? because i did that and it did not seem to work properly for al the bg-foreground etc...
Southeastern blueberry beeOP
So now i can make a div with the --background: 0 0% 100%; in root and dark mode and it will chagne normally using next themes? Thats how it works for me right now