HTML & CSS · Senior · Question 43 of 75

How do you make Tailwind v4's dark mode follow a `.dark` class instead of the system setting?

1Set darkMode: 'class' inside @theme
✓Correct answer: Override the variant: @custom-variant dark (&:where(.dark, .dark *));
3Add a dark-mode class to <body> - Tailwind detects it automatically

Explanation

In v4, variants are defined in CSS with @custom-variant. That way dark: can be bound to a class or an attribute ([data-theme=dark]). darkMode: 'class' is a v3 tailwind.config.js option and doesn't work inside @theme. :where() keeps specificity from increasing.

How do you make Tailwind v4's dark mode follow a `.dark` class instead of the system setting?

Explanation

Further reading

Problem with a question

Test yourself

How do you make Tailwind v4's dark mode follow a .dark class instead of the system setting?

Explanation

Further reading

Test yourself

How do you make Tailwind v4's dark mode follow a `.dark` class instead of the system setting?