Skip to content

Rule · Lint

dark: follows the OS, but the app toggles themes with a class/attribute

lint/tw-dark-variant-oswarnvoid lintupdated

Why it matters

By default v4's dark: variant is @media (prefers-color-scheme: dark). If a theme toggle (next-themes, classList.toggle('dark'), data-theme) is used, dark: utilities ignore it: users pick light mode and still get dark styles (or the reverse).

How to fix it

Redefine the variant in the CSS entry to match how the theme is applied.

Example

css
@import "tailwindcss";
/* class strategy (next-themes attribute="class") */
@custom-variant dark (&:where(.dark, .dark *));
/* or attribute strategy (next-themes default) */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

References

More lint rules

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.