Styling with Tailwind CSS

Build accessible UIs using Tailwind CSS v4 utility classes and shadcn/ui component patterns. Tailwind v4 uses CSS-first configuration only - never create or modify tailwind.config.js/tailwind.config.ts. Supports Radix UI (default) or Base UI as primitive libraries.

Critical Rules

No tailwind.config.js - CSS-First Only

Tailwind v4 configures everything in CSS. Migrate any JS/TS config:

• theme.extend.colors → @theme { --color-*: ... }
• plugins → @plugin "..." or @utility
• content → @source "..."
• tailwindcss-animate → @import "tw-animate-css"
• @layer utilities → @utility name { ... }

Always Use Semantic Color Tokens

// CORRECT - respects themes and dark mode