Tailwind CSS 4.0 is here, and it's packed with updates that make styling your web projects faster, simpler, and more powerful.
I'm personally extremely excited for this release and I've been a huge fan of Tailwind CSS ever since I started using it and have built all of my products UserJot and LogSnag with it.
Let's break down each new feature in detail, with examples to show you how they work.
Oxide Engine: Supercharged Speed
The Oxide engine is a complete rewrite of Tailwind's core, focusing on speed. It's like swapping out an old engine in a car for a brand-new, high-performance one. This new engine is built using Rust, which is known for being fast and efficient.
What it means for you:
- Faster Full Builds: When you build your entire project, it's now up to 5 times faster. Imagine waiting a minute for your project to build, and now it only takes 12 seconds.
- Blazing-Fast Incremental Builds: When you make small changes, like tweaking a color or adding a new class, the rebuild is over 100 times faster. This is measured in tiny fractions of a second, so you'll see your changes almost instantly.
For example, let's say you're working on a website with lots of components. In older versions of Tailwind, a full build might take a while. With the Oxide engine, that time is cut down significantly, letting you see your changes much faster.
Unified Toolchain: No More Extra Tools
Tailwind CSS 4.0 now works directly with Lightning CSS. This means you don't need to install and configure extra tools like PostCSS, Autoprefixer, or postcss-import. It's like getting a Swiss Army knife that has everything you need built-in.
What it means for you:
- Simplified Setup: Fewer dependencies mean less to install and configure.
- Handles Everything Out of the Box: It automatically takes care of things like adding browser prefixes and letting you import CSS files.
Example:
In the past, you might have needed to set up PostCSS to handle @import statements. Now, you can just import your CSS files directly:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
No extra configuration needed!
CSS-First Configuration: Customize in CSS
Tailwind CSS 4.0 moves the configuration from JavaScript files to CSS files. This means you can now customize your Tailwind settings directly in your CSS. It's like having the controls for your website's style right where you're writing the styles.
What it means for you:
- Clearer Customization: You can see how your changes affect your styles right away.
- More Intuitive: It feels more natural to customize CSS in a CSS file.
Example:
Instead of editing a tailwind.config.js file, you can now define your custom colors and fonts in your CSS using the @theme directive:
@theme {
--color-primary: oklch(0.84 0.18 117.33);
--font-sans: "Inter", sans-serif;
}
This makes it easier to manage and understand your customizations.
Native Cascade Layers: Style Organization
Tailwind CSS 4.0 uses CSS @layer rules to help you organize your styles and avoid conflicts. It's like having different folders for your styles, so they don't get mixed up.
What it means for you:
- Better Specificity Management: You can control which styles take priority.
- Improved Organization: Easier to manage your styles and prevent conflicts.
Example:
You can define a specific layer for your components:
@layer components {
.btn {
@apply px-4 py-2 bg-blue-500 text-white;
}
}
This ensures that your button styles are applied correctly and don't clash with other styles.
Container Queries: Responsive to Containers
Container queries let you style elements based on the size of their container, not just the screen size. It's like having styles that adapt to the space they're in, no matter where they are on the page.
What it means for you:
- Context-Aware Designs: Styles adapt to the container they're in, not just the screen.
- More Flexible Layouts: Create more dynamic and responsive layouts.
Example:
You can create a grid that changes its layout based on the size of its container:
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">
<!-- Content -->
</div>
</div>
The grid will change from one column on small containers to two columns on medium containers, and three columns on large containers.
Composable Variants: Flexible Style Combinations
Tailwind CSS 4.0 introduces new ways to combine variants, giving you more control over your styles. It's like having a set of building blocks that you can combine in different ways.
What it means for you:
- More Control: Style elements based on complex conditions.
- Enhanced Interactivity: Create interactive UIs without extra JavaScript.
Example:
You can style an element when its parent is hovered:
<div class="group">
<p class="group-hover:text-blue-500">Hover me</p>
<p class="not-group-hover:text-gray-500">Do not hover me</p>
</div>
When you hover over the div, the first paragraph turns blue, and the second paragraph stays gray.
Zero-Configuration Content Detection: Automatic File Scanning
Tailwind CSS 4.0 automatically detects your content files, so you don't have to manually configure them. It's like having a smart scanner that knows where to find your HTML, JavaScript, and other files.
What it means for you:
- Less Setup: No need to configure content paths manually.
- Reduced Errors: Less chance of missing styles due to misconfiguration.
Example:
Tailwind will automatically scan your project for HTML files and apply styles without you having to tell it where to look.
Modern Web Features: Cutting-Edge CSS
Tailwind CSS 4.0 includes support for advanced CSS features like @starting-style, color-mix, and @property. These features let you use the latest CSS techniques in your projects.
What it means for you:
- Enhanced Capabilities: Use modern CSS features to create advanced effects.
- Future-Proofing: Stay up-to-date with the latest web standards.
Example:
You can use @property to define custom properties for animations:
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
This allows you to create smooth, CSS-based animations without relying on JavaScript.
Tailwind CSS 4.0 brings a lot of improvements that make it faster, easier, and more powerful for web development. Whether you're starting a new project or upgrading an existing one, these new features can help you streamline your workflow and create stunning web designs.
You can learn more about Tailwind CSS 4.0 on their official website.
If you found anything else in their updates that I missed, please let me know in the comments below.
Top comments (13)
I dont know if I like the css-first configuration. I kinda liked the javascript stuff?
You know the library generates css?
If you want to keep the css hidden, how are you sure the library does things you want it to do?
"You know C generates Assembly? If you want to keep the assembly hidden, how are you sure the compiler does things you want it to do?" Not trying to be snarky, but I don't understand your point. Its very easy to validate that, I mean I'd see pretty quickly if my font isnt loaded correctly? If I want I could also just look into the generated CSS
If you are willing to check the generated code, what is the problem with the css config? According to the documentation you can do all the same things.
You are right my remark was snarky. But css is not that difficult. So your C Assembly analogy is not quite te same as you think it is.
I think i reacted on your comment assuming you want to solve everything frontend in javascript. And I shouldn't have done that.
Fair points, I think the big difference is that I am not a frontend dev (infra mostly, assembly is easier than CSS for me lol) and just want my styling to work. I don't care how my box becomes the correct color, I just want them red. Using javascript was very simple for me because I know some Javascript. Now I need to rawdog CSS, which I didnt want to (that's why I am using tailwind!). Does that make sense? :D
Damn I don't want to touch assembly code with a ten foot pole, respect!
The config is a bunch of css properties, so it is not that big of a learning curve. I assume there will pop up javascript to css converters soon, because of the popularity of tailwind.
And that will solve your problem.
I understand where your coming from. It just doesn't feels right to me that people think css and html are not worth the time to learn.
You mean like regular CSS? I thought Tailwind expressly rejected CSS in CSS files? That's the philosophy of it - don't do anything in CSS or abstract anything out, keep it in the same component files as the HTML.
not-group-hover:text-gray-500looks funny to me. It's less readable; I don't really intuit what it's trying to do, since as I understand ittext-gray-500would do exactly the same thing in this example?Not quite. The repo for my website has a globals.scss file that has the
@tailwindimports and more scss behind it, like styles for the navbar, and fonts. Tailwindcss uses css classes, it is not made to eliminate css, but rather to extend it's functonality.How does it "extend" CSS' functionality, if it uses CSS classes?
Tailwind 4.0, or the major fourth iteration of an arbitrary reinterpretation of a subset of CSS with basically a write-only language that installs dozens of dependencies on your projects just to make you throw separation of concerns out of the window and wait for the next major release in hope to let you use a feature that browsers natively supported for months - if not years.
Always a great choice.
The pervious Tailwind are outperform my expectations of compiled css size ( small as can be 4.88kb the greatest CSS file ziped size), can check on my tailwind related game repo: dev.to/pengeszikra/javascript-grea... . this features looks very promising, I deffinetly try out.
Thx for a great summarize!
PSA: CSS file size is almost never the cause of your web performance issues.
unocss.dev/ is more flexible and interesing project, supports Tailwind classes too