Tailwind CSS Cursor Rules

.cursorrules for Tailwind v4

# Tailwind CSS v4 Rules

## CRITICAL: Tailwind v4 Changes
- NO tailwind.config.js — config is in CSS (@theme directive)
- NO @apply in components — use utility classes directly
- CSS-first configuration via @import "tailwindcss"

## Design Tokens
- Define in @theme {} block in your main CSS file
- Use CSS custom properties for dynamic values
- Prefix custom utilities with project name

## Utility Usage
- Prefer utilities over custom CSS
- Group related utilities: layout > spacing > typography > color
- Use arbitrary values sparingly: [calc(100%-2rem)]
- Use container queries over media queries when possible

## Components
- Extract repeated patterns into components, NOT @apply
- Use data attributes for state: data-[active]:bg-blue-500
- Responsive: mobile-first, use sm:/md:/lg: breakpoints