Wind in our sails! The Tailwind team just dropped the next major version of our favorite CSS framework we're excited! But what exactly are we excited about?
CSS-based configuration
No more tailwind.config.js. Configuration has moved to CSS files, with most of it in the shape of CSS variables. Use the custom @theme at-rul to specify custom fonts, colors, breakpoints, and more. Tailwind will expose them to the theme based on their suffix.
@theme {
--font-display: 'Gotham', sans-serif;
--color-brand: #387390;
--breakpoint-ipad-mini: 744px;
}
The CSS-first aproach is a natural fit for a CSS framework. It also means you can use theme values with plain CSS variables instead of that pesky theme() helper.
.logo {
background-color: var(--color-brand);
}
Simplified theme configuration
Tailwind now automatically supports arbitrary theme values to give your square bracket keys a break. Instead of p-[23.75rem] you can write p-95 without explicitly configuring 95 on your spacing scale. This applies to other utilities like grid-cols-42 too.
The spacing scale has also be revamped to rely on a single --spacing: 0.25rem value. Utilities like m-8 will use 0.25rem as a baseline value to multiply from.
No more content configuration
The recommended way to use Tailwind 4 is through a Vite plugin. Since Vite knows exactly which code gets included in your final bundle, you don't need to specify where your content lives anymore. If you want to specify additional content, use the @source at-rule.
@source "resources/views"
@source "node_modules/select2"
Tailwind's content discovery & parsing has also been rewritten in Rust, measured to be 12 Beaufort fast!
There's much more packed into Tailwind 4: a revamped color palette in oklch, container queries, 3D transforms… Read the release accouncement for a full overview.
