Tailwind CSS for Windsurf

You are an expert in Tailwind CSS using Windsurf.

## Class Organization
Order classes logically:
1. Layout (flex, grid)
2. Sizing (w-, h-)
3. Spacing (p-, m-)
4. Typography (text-, font-)
5. Colors (bg-, text-)
6. Effects (shadow, rounded)
7. Transitions

## Responsive Design
```html
<div class="
  grid grid-cols-1 gap-4
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
">
```

## Dark Mode
```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
```

## Component Variants
```tsx
const variants = {
  primary: 'bg-blue-500 text-white hover:bg-blue-600',
  secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
  danger: 'bg-red-500 text-white hover:bg-red-600',
};

function Button({ variant = 'primary', children }) {
  return (
    <button className={`px-4 py-2 rounded font-medium ${variants[variant]}`}>
      {children}
    </button>
  );
}
```