---
name: tailwind-shadcn
description: Scopes all styling to Tailwind CSS utility classes and Shadcn/UI component patterns — consistent, accessible, and theme-aware.
triggers: Tailwind, Shadcn, cn(), dark mode, class variance authority, radix, cva, component variants
---

## Core Rules
- Tailwind utility classes only — no raw CSS unless absolutely necessary
- Shadcn/UI primitives as base component layer (Button, Card, Dialog, Input, Select, Table, etc.)
- Use cn() (clsx + tailwind-merge) for conditional class merging
- Support dark mode via dark: variant
- CSS variables in globals.css for brand theming

## Brand Colors in tailwind.config.ts
```typescript
colors: {
  brand: { navy: 'var(--color-primary)', blue: 'var(--color-secondary)', teal: 'var(--color-accent)' }
}
```

## CVA Component Pattern
```typescript
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
  {
    variants: {
      variant: {
        default: 'bg-accent text-white hover:bg-accent/90',
        outline: 'border border-input bg-background hover:bg-accent',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
      },
      size: {
        sm: 'h-9 px-3 text-xs',
        md: 'h-10 px-4',
        lg: 'h-11 px-8 text-base',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: { variant: 'default', size: 'md' },
  }
)

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}

function Button({ className, variant, size, ...props }: ButtonProps) {
  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
}
```

## Shadcn Component Usage
```typescript
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Toast, Toaster } from '@/components/ui/toast'
import { useToast } from '@/hooks/use-toast'
```

## Anti-Patterns
- ❌ style={{ }} inline styles — use Tailwind classes
- ❌ Mixing Tailwind with CSS modules
- ❌ Arbitrary values ([#ff0000]) everywhere — add to theme config instead
- ❌ Not using cn() for conditional classes — causes class conflicts