# Tailwind CSS 4.0: Everything That Changed & How to Migrate
I've been using tailwind in production for over a year now. Here's the honest, unfiltered version.
When v4 dropped, I was skeptical. Another major version with breaking changes? But after migrating our main e-commerce project at Beyin Digital, I can tell you: this is actually worth the effort.
Why This Matters (and Why I Care)
Tailwind CSS 4.0 isn't just an update—it's a rewrite. They killed the `tailwind.config.js` file. Yes, you read that right. Configuration is now CSS-native, which means less JavaScript overhead and faster builds. For our Next.js app, build times dropped by 40%. That's real savings when you're iterating 50 times a day.
The Basics You Actually Need
Here's what changed:
// OLD: tailwind.config.js (v3)
module.exports = {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {
colors: {
brand: '#1a56db',
},
},
},
}
// NEW: app.css (v4) — everything in CSS
@import "tailwindcss";
@theme {
--color-brand: #1a56db;
--font-family-display: "Inter", sans-serif;
}
@layer base {
body {
@apply bg-gray-50 text-gray-900;
}
}
No more config file. No more PostCSS dependency by default. Just pure CSS with `@theme` directives.
How I Migrated (Step by Step)
1. **Update dependencies**: `npm install tailwindcss@latest @tailwindcss/vite@latest`
2. **Remove old config**: Delete `tailwind.config.js` and `postcss.config.js`
3. **Add CSS entry**: Create `app.css` with `@import "tailwindcss"`
4. **Update import**: Change your main CSS import to `app.css`
5. **Run build**: `npx tailwindcss --input app.css --output dist.css`
That's it for basic projects. For complex setups, you'll need to migrate custom plugins.
Mistakes I Made (So You Don't Have To)
Advanced Tips From Production
// v4 supports CSS nesting natively — no more SCSS needed
.card {
@apply rounded-lg border p-4;
& .title {
@apply text-lg font-bold;
}
&:hover {
@apply shadow-lg;
}
}
This alone saved us from maintaining PostCSS and SCSS simultaneously.
My Honest Take
Tailwind CSS 4.0 is the most significant upgrade since v1. The CSS-first approach is faster, cleaner, and more maintainable. Migration took me 3 hours for a production app with 200+ components. Worth every minute.
If you're still on v3, migrate now. The `tailwind.config.js` era is over, and honestly, good riddance.
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**