In Tailwind v4, you use the @theme
directive to define your default custom properties (CSS variables) and the @variant
directive to modify them based on themes like dark
. For dark mode, Tailwind automatically applies the dark
variant if the dark
class is present on the root element. You no longer manually toggle CSS with .dark
inside your CSS file; instead, use these directives to handle it.