Why I Switched to Tailwind v4

Tailwind CSS v4 is finally here, and it's a complete rewrite. Here's what's new and why I made the switch.

The New Config System

Gone is the JavaScript config file. Now you define your theme right in CSS:

@import "tailwindcss";

@theme {
  --color-accent: #a855f7;
  --color-bg: #0a0a0a;
}

This is so much cleaner than the old approach.

CSS-First Approach

Everything is now CSS-native:

• Custom properties instead of JavaScript
• Better IDE integration
• Smaller bundle sizes
• Faster builds

Vite Plugin

Integration with Vite is seamless:

import tailwindcss from '@tailwindcss/vite'

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

That's it. No PostCSS config needed.

Should You Upgrade?

If you're starting a new project: absolutely.

If you have an existing project: take your time, it's a big change.

The future of Tailwind is bright, and I'm here for it!