---
title: "`dark:` follows the OS, but the app toggles themes with a class/attribute (lint/tw-dark-variant-os)"
description: "lint/tw-dark-variant-os: By default v4's `dark:` variant is `@media (prefers-color-scheme: dark)`."
canonical: https://void-design.vercel.app/rules/lint/tw-dark-variant-os
lastModified: 2026-09-16
---

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

`lint/tw-dark-variant-os` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## 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

- https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

## 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.

- `tw-unknown-class` Class looks like a Tailwind utility but compiles to no CSS — [lint/tw-unknown-class](https://void-design.vercel.app/rules/lint/tw-unknown-class)
- `tw-v3-arbitrary-var` `utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)` — [lint/tw-v3-arbitrary-var](https://void-design.vercel.app/rules/lint/tw-v3-arbitrary-var)
- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-dark-variant-os`