Tailwind CSSÎncepător#dark-mode#css#tailwind

Dark mode cu Tailwind v4 — migrarea mea de la class strategy la next-themes

De Gabriela Neagu, 20 apr. 2026 · 382 vizualizări · 3 like-uri

Postat acum 1 zi

tsx

'use client';
import { ThemeProvider } from 'next-themes';

export function Providers({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

Tailwind v4 + CSS variables scapă de multă complexitate. Dar pentru persist + no-flash tot ai nevoie de next-themes.

Ce e nou în v4

CSS variables automate: bg-zinc-900 devine var(--color-zinc-900). Ușor de override pe .dark.

Când ajunge doar Tailwind

Toggle simplu care nu persistă
Nu conteaza flash-ul la primul load
Nu ai SSR hydration sensibil

Când tot ai nevoie de next-themes

Vrei localStorage persistence
Vrei prefers-color-scheme fallback
Nu vrei flash pe first paint (blocking script)
Ai componente shadcn/ui care depind de dark class

Setup-ul meu

ThemeProvider de la next-themes în layout.tsx, attribute="class", defaultTheme="system".

Răspunsuri 0

Se încarcă răspunsurile…

Loghează-te pentru a răspunde

Doar membrii comunității pot lăsa comentarii.

Conectează-te Creează cont

Înapoi la listă