tailwindv4

# Tailwind CSS v4

Configure and use Tailwind CSS v4 with its CSS-first configuration and new features.

## Key Changes in v4

### CSS-First Configuration

No more `tailwind.config.js` - configure directly in CSS:

```css
@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;
  --color-brand: oklch(0.7 0.15 200);
  --breakpoint-3xl: 1920px;
}
```

### New Import Syntax

```css
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 */
@import "tailwindcss";
```

### CSS Variable Syntax Change

```html
<!-- v3: Square brackets -->
<div class="bg-[--brand-color]"></div>

<!-- v4: Parentheses -->
<div class="bg-(--brand-color)"></div>
```

### theme() Function Replacement

```css
/* v3 */
.my-class {
  background-color: theme(colors.red.500);
}

/* v4: Use CSS variables */
.my-class {
  background-color: var(--color-red-500);
}
```

## Installation

### New Project

```bash
npm install tailwindcss@next @tailwindcss/postcss@next
```

### PostCSS Configuration

```js
// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
```

### Vite Configuration

```ts
// vite.config.ts
import tailwindcss from "@tailwindcss/vite"

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

## @theme Block

Define design tokens directly in CSS:

### Colors

```css
@theme {
  /* OKLCH format (recommended) */
  --color-brand-50: oklch(0.98 0.02 200);
  --color-brand-100: oklch(0.95 0.04 200);
  --color-brand-500: oklch(0.7 0.15 200);
  --color-brand-900: oklch(0.3 0.1 200);

  /* HSL also supported */
  --color-accent: hsl(262 83% 58%);
}
```

### Typography

```css
@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Satoshi", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font sizes */
  --text-tiny: 0.625rem;
  --text-huge: 4rem;
}
```

### Spacing

```css
@theme {
  --spacing-128: 32rem;
  --spacing-144: 36rem;
}
```

### Breakpoints

```css
@theme {
  --breakpoint-3xl: