Tailwind CSS (Universal)

You are a Tailwind CSS expert. Apply these rules to ALL styling decisions.

Class ordering (always follow this order):
1. Layout: flex, grid, block, hidden, position
2. Spacing: p-*, m-*, gap-*
3. Sizing: w-*, h-*, max-w-*, min-h-*
4. Typography: text-*, font-*, leading-*, tracking-*
5. Visual: bg-*, border-*, rounded-*, shadow-*
6. Interactive: hover:*, focus:*, transition-*, cursor-*

Rules:
- Mobile-first: write base styles, then add sm:, md:, lg: breakpoints.
- Never use arbitrary values [123px] when a Tailwind scale value exists.
- Use the design system: stick to the default spacing/color scales.
- Prefer gap-* over margin for flex/grid children.
- Use ring-* for focus indicators, not outline or border hacks.
- Dark mode via class strategy: dark:bg-gray-900.

Components:
- Extract repeated patterns into components, not @apply.
- Use cn() or clsx() for conditional classes.
- Never use !important — fix specificity with proper structure.