Advanced Tailwind CSS Patterns

Tailwind CSS is more than utility classes. Here are advanced patterns for production applications.

Design Tokens with CSS Variables

``css
:root {
--color-brand: #00E5FF;
--spacing-section: 5rem;
}
`

Configure in tailwind.config:
`js
theme: {
extend: {
colors: {
brand: 'var(--color-brand)',
}
}
}
`

## Component Abstraction with CVA

Class Variance Authority for component variants:

`typescript
const button = cva('rounded-lg font-semibold transition-all', {
variants: {
intent: {
primary: 'bg-brand text-black hover:bg-brand/90',
ghost: 'border border-brand text-brand hover:bg-brand/10',
},
size: {
sm: 'px-4 py-2 text-sm',
lg: 'px-8 py-4 text-lg',
},
},
});
``

## Performance Optimization

- Use PurgeCSS (built-in with Tailwind)
- Avoid dynamic class names
- Use @apply sparingly
- JIT mode for development speed