tailwind-v4

# Tailwind CSS v4 Best Practices

## Quick Reference

**Vite Plugin Setup**:
```ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss()],
});
```

**CSS Entry Point**:
```css
/* src/index.css */
@import 'tailwindcss';
```

**@theme Inline Directive**:
```css
@theme inline {
  --color-primary: oklch(60% 0.24 262);
  --color-surface: oklch(98% 0.002 247);
}
```

## Key Differences from v3

| Feature | v3 | v4 |
|---------|----|----|
| Configuration | tailwind.config.js | @theme in CSS |
| Build Tool | PostCSS plugin | @tailwindcss/vite |
| Colors | rgb() / hsl() | oklch() (default) |
| Theme Extension | extend: {} in JS | CSS variables |
| Dark Mode | darkMode config option | CSS variants |

## @theme Directive Modes

### default (standard mode)
Generates CSS variables that can be referenced elsewhere:
```css
@theme {
  --color-brand: oklch(60% 0.24 262);
}

/* Generates: :root { --color-brand: oklch(...); } */
/* Usage: text-brand → color: var(--color-brand) */
```

**Note**: You can also use `@theme default` explicitly to mark theme values that can be overridden by non-default @theme declarations.

### inline
Inlines values directly without CSS variables (better performance):
```css
@theme inline {
  --color-brand: oklch(60% 0.24 262);
}

/* Usage: text-brand → color: oklch(60% 0.24 262) */
```

### reference
Inlines values as fallbacks without emitting CSS variables:
```css
@theme reference {
  --color-internal: oklch(50% 0.1 180);
}

/* No :root variable, but utilities use fallback */
/* Usage: bg-internal → background-color: var(--color-internal, oklch(50% 0.1 180)) */
```

## OKLCH Color Format

OKLCH provides perceptually uniform colors with better consistency across hues:

```css
oklch(L% C H)
```

- **L (Lightness)**: 0% (black) to 100% (white)
- **C (Chroma)**: 0 (gray) to ~0.4 (vibrant)
- **H (Hue)**: 0-360 degrees (red → yellow → green → blue → magenta)