Tailwind CSS

@wrksz/themes applies a dark class to <html> by default. In Tailwind v4, you need to tell Tailwind to use that class for dark: variants instead of the default prefers-color-scheme media query.

Setup

Add @custom-variant to your CSS:

app/globals.css

@import "tailwindcss";

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

Then add ThemeProvider to your root layout:

app/layout.tsx

import { ThemeProvider } from "@wrksz/themes/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Now use dark: variants anywhere:

<div className="bg-white text-black dark:bg-zinc-900 dark:text-white">
  Hello
</div>

Data attribute

If you prefer attribute="data-theme" over classes, update the @custom-variant selector accordingly:

<ThemeProvider attribute="data-theme">
  {children}
</ThemeProvider>

app/global.css

@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Custom themes

For more than two themes, use CSS variables per theme and reference them with Tailwind:

<ThemeProvider
  themes={["light", "dark", "dim"]}
  attribute="class"
>
  {children}
</ThemeProvider>

.light { --bg: #ffffff; --fg: #0a0a0a; }
.dark  { --bg: #09090b; --fg: #fafafa; }
.dim   { --bg: #1c1c1e; --fg: #fafafa; }

<div className="bg-(--bg) text-(--fg)">
  Hello
</div>

Setup

Data attribute

Custom themes

On this page