Tailwind v4 is the biggest rewrite of the framework since v1. It's faster, more flexible, and breaks some things. Here's everything you need to know.
No more tailwind.config.js for basic setup. Configuration now lives in CSS:
/* Old way: tailwind.config.js */
module.exports = {
theme: {
extend: {
colors: {
brand: '#6366f1'
}
}
}
}
/* New way: your main CSS file */
@import "tailwindcss";
@theme {
--color-brand: #6366f1;
}The new build engine is written in Rust (via Lightning CSS and a custom Rust core). Cold build times dropped from seconds to milliseconds.
No more content: ['./src/**/*.{js,jsx,ts,tsx}'] configuration. Tailwind v4 auto-detects your template files.
Generate arbitrary values without brackets in more places:
<!-- v3: needed brackets -->
<div class="mt-[17px]">
<!-- v4: can use native CSS values in more places -->
<div class="mt-17">Default color palette updated. gray now maps to a neutral gray (not blue-tinted). Migration script available.
@apply behavior slightly differentnpx @tailwindcss/upgrade@nextThe codemod handles most of it automatically. Manual fixes needed for custom plugins.
For new projects: Yes, start with v4. For existing projects: Wait for your dependencies to update, then migrate. The performance gains are real but not urgent enough to break a working app.