Tailwind CSS Cursor Rules

Class Order

1. Layout (position, display, z-index)
2. Spacing (margin, padding)
3. Sizing (width, height)
4. Visual (colors, borders, shadows)
5. Typography
6. State (hover, focus, etc.)

Best Practices

• Use mobile-first (md:, lg:, xl:)
• Extract repeated patterns to components
• Use @apply sparingly
• Use arbitrary values when needed
• Use dark: variant for dark mode

AI Instructions

• Use shorthand classes
• Group related utilities
• Add custom colors in config first