Feature Request: Bring Back Dark-Mode-Specific CSS Variables in Tailwind 4

[pcoterecollective]

Description

In Tailwind CSS 3, defining dark-mode-specific CSS variables was straightforward, making it easy to customize themes without adding extra utility classes. However, in Tailwind CSS 4, there doesn’t seem to be a built-in way to achieve this efficiently. The current approach requires applying two separate classes (e.g., bg-slate-200 dark:bg-slate-900 text-slate-900 dark:text-slate-100), which can be cumbersome when handling multiple dark-mode-specific styles.

Request

Reintroduce a way to define dark-mode-specific CSS variables within Tailwind’s configuration or provide a recommended approach for theming that avoids excessive class duplication.
Maybe something like this

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--color-white);
}

@theme[dark] inline {
  --color-background: var(--color-black);
}

This would improve maintainability and keep styles more manageable, especially for complex themes.

Would love to see this feature reconsidered!

[wongjn]

You can sort of do this already using regular CSS with @variant to avoid the duplication:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--color-white);
}

@layer theme {
  * {
    @variant dark {
      --color-background: var(--color-black);
    }
  }
}

[RobinMalfait]

How did you do it in v3? It should be the same or simpler in v4.

We don't have and never had a native way of doing it so whatever technique you used should be possible in v4 as well.

[pcoterecollective]

@RobinMalfait You can find an example of a "v3" way to achieve this in the Shadcn-UI repo.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    /* ... */
  }

  .dark {
    --background: 240 10% 3.9%;
    /* ... */
  }
}

There's also a "v4" example here but I'd like to have your opinion on it before I choose to go down that road.
The theme-related CSS vars aren't declared in a @theme block, which makes me doubt this is the right approach.

[felipe-miranda-marreiros]

You mean something like this?

:root {
  --gray-950: 
  --gray-50:
}

@theme {
  --color-gray-950: var(--gray-950);
  --color-gray-50: var(--gray-50);
}

@media (prefers-color-scheme: dark) {
  @theme inline {
    --background: var(--gray-950);
    --foreground: var(--gray-50);
  }
}

@media (prefers-color-scheme: light) {
  @theme inline {
    --background: var(--gray-50);
    --foreground: var(--gray-950);
  }
}

body {
  color: var(--foreground);
  background: var(--background);
}

[pcoterecollective]

@felipe-miranda-marreiros
Would that also work when dark-mode is driven by a class on the html tag (or other child element)?

.dark,
.dark * {
  @theme inline {
    --background: var(--gray-950);
    --foreground: var(--gray-50);
  }
}

[felipe-miranda-marreiros]

:root {
  --gray-950: hsl(0, 0%, 16%);
  --gray-50: hsl(0, 0%, 96%);
}

@layer base {
  [class='light'] {
    --background: var(--gray-50);
    --foreground: var(--gray-950);
  }

  [class='dark'] {
    --background: var(--gray-950);
    --foreground: var(--gray-50);
  }
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

And then (example):

<button className="text-white dark:text-background">
      Undone
 </button>

It works.

[pcoterecollective]

Ok. So, here's what I had in mind, illustrated with what seems to be a working example:

@import "tailwindcss";

:root {
	--color-background: var(--color-slate-100);
	--color-foreground: var(--color-slate-900);
	--color-border: var(--color-slate-300);
}

.dark {
	--color-background: var(--color-slate-900);
	--color-foreground: var(--color-slate-300);
	--color-border: var(--color-slate-700);
}

@theme {
	--color-background: var(--color-background);
	--color-foreground: var(--color-foreground);
	--color-border: var(--color-border);
}

  <main class="w-screen h-screen grid grid-cols-2">
    <div class="flex items-center justify-center bg-background text-foreground">
      <div class="border-2 border-border p-4 rounded-lg">
        <h1 class="text-3xl font-bold underline">Light</h1>
      </div>
    </div>
    <div class="dark flex items-center justify-center bg-background text-foreground">
      <div class="border-2 border-border p-4 rounded-lg">
        <h1 class="text-3xl font-bold underline">Dark</h1>
      </div>
    </div>
  </main>

Thanks!