Hornbill LitePress

Tailwind v4 — What Changed and Why

A practical guide to tailwind v4 — What Changed and Why — tips, best practices, and real-world examples.

# Tailwind v4 — What Changed and Why

Tailwind CSS v4 is a major update with significant changes.

## Key Changes

### No More Config File

Tailwind v4 reads your CSS directly:

```css
@import "tailwindcss";

@theme {
--color-brand: #dc2626;
}
```

### New Engine

The new Oxide engine is:

- 10x faster builds
- Smaller output
- Better IntelliSense

### Built-in Content Detection

No need to configure `content` paths — it auto-detects.

## Migration Tips

1. Remove `tailwind.config.js`
2. Move customizations to CSS `@theme`
3. Update plugins to new format

## What I Love

- **Zero config** for most projects
- **CSS-first** approach
- **Lightning fast**

## Conclusion

Tailwind v4 simplifies setup and dramatically improves performance.
Tailwind CSS

Written by

B
Ben Carter

UX engineer passionate about accessible design systems and performance budgets.

← Back to Ben Carter's posts