tailwind-4

When to Use

Triggers: When styling with Tailwind, using className, conditional styles, or dark mode.

Load when: styling with Tailwind CSS 4, using className, implementing dark mode, or needing conditional styles.

Critical Patterns

Pattern 1: Semantic classes — never var() in className

// ✅ Use semantic classes
<div className="bg-primary text-white" />
<div className="border-border" />
<div className="text-foreground bg-background" />