shadcn-tailwindlisted

# 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 ```tsx // CORRECT - respects themes and dark mode <div className="bg-primary text-primary-foreground"> // WRONG - breaks theming <div className="bg-blue-500 text-white"> ``` Always pair `bg-*` with `text-*-foreground`. Extend with success/warning/info in [theming.md](theming.md). ### Never Build Class Names Dynamically ```tsx // WRONG - breaks Tailwind scanner <div className={`bg-${color}-500`}> // CORRECT - complete strings via lookup const colorMap = { red: "bg-red-500", blue: "bg-blue-500" } as const <div className={colorMap[color]}> ``` ### cn() Merge Order Defaults first, consumer `className` last (tailwind-merge last-wins): ```tsx className={cn(buttonVariants({ variant, size }), className)} // correct className={cn(className, buttonVariants({ variant, size }))} // wrong