DEV Community

Cover image for Tailwind CSS 4.0 Is Here: What You Need to Know
Shayan
Shayan

Posted on • Edited on

24 7 7 6 8

Tailwind CSS 4.0 Is Here: What You Need to Know

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.

Tailwind 4.0

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";
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (22)

Collapse
 
pengeszikra profile image
Peter Vivo • • Edited

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!

Collapse
 
ben profile image
Ben Halpern •

Thanks for the link

Collapse
 
maxart2501 profile image
Massimo Artizzu •

PSA: CSS file size is almost never the cause of your web performance issues.

Collapse
 
jwhenry3 profile image
Justin Henry • • Edited

when you target lower-end machines and bundle size matters, a 1mb file vs a 5kb file can make a huge difference. The impact is in the initial load times, which arguable is a variable concern. Some care, some don't

Thread Thread
 
maxart2501 profile image
Massimo Artizzu •

PSA: if you have a 1 MB CSS files, you most probably have way other problems than CSS parsing.

It'd be a symptom of a total lack of optimizations. E.g. JS bundles could very well be over 5 MB, and images could be original 12 Mpx shots directly from a camera. How about that for lower-end machines?

Also: stop lying to yourself or exaggerating for the sake of your deceptive arguments. You will never see a comparison between 5 KB of Tailwind generated CSS and 1 MB of user-defined classes. In my last project, where Tailwind is used scarcely, it already fares at 31 KB, which is more than double of the 15 KB of the custom-made CSS.

Conclusion: CSS file size is almost never the cause of your web performance issues. And Tailwind sure as hell is not the solution.

Collapse
 
code42cate profile image
Jonas Scholz •

I dont know if I like the css-first configuration. I kinda liked the javascript stuff?

Collapse
 
xwero profile image
david duymelinck •

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?

Collapse
 
code42cate profile image
Jonas Scholz •

"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

Thread Thread
 
xwero profile image
david duymelinck •

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.

Thread Thread
 
code42cate profile image
Jonas Scholz •

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

Thread Thread
 
xwero profile image
david duymelinck •

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.

Collapse
 
moopet profile image
Ben Sinclair •

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.

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-500 looks funny to me. It's less readable; I don't really intuit what it's trying to do, since as I understand it text-gray-500 would do exactly the same thing in this example?

Collapse
 
gamelord2011 profile image
Reid Burton •

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 quite. The repo for my website has a globals.scss file that has the @tailwind imports 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.

Collapse
 
maxart2501 profile image
Massimo Artizzu • • Edited

to extend it's functonality.

How does it "extend" CSS' functionality, if it uses CSS classes?

Thread Thread
 
gamelord2011 profile image
Reid Burton •

It does so by providing thousands of useful css classes & colors by adding the classes wherever the @tailwind or @import rules are eg:

/*
    some code
*/
@tailwind base //This is where the tailwindcss classes are inserted by the build process.
/*
    more code
*/
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
maxart2501 profile image
Massimo Artizzu •

So, it doesn't extend CSS' functionality: it just uses CSS as it was intended.

Thread Thread
 
gamelord2011 profile image
Reid Burton •

Huh... I did not think of it like that.

Collapse
 
maxart2501 profile image
Massimo Artizzu •

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.

Collapse
 
jwhenry3 profile image
Justin Henry •

Let's just target the purpose of it. Rather than writing css and classes all over your project and risk duplication and bloat in the generated bundles, tailwind takes all the used styles and optimizes the bundle output for the css. Anything not used does not get included, so while you may write CSS in a CSS file, if you dont have something that will treeshake and reduce CSS bloat, that is what tailwind is for. It has a specific purpose and if you don't care about its purpose, don't use it. You're absolutely right that it doesn't do everything that all css can do, but that's not the point of it.

Collapse
 
maxart2501 profile image
Massimo Artizzu • • Edited

The point is that Tailwind has no point, at all.

First of all, let's not forget about all those legacy Tailwind 2.x projects that ended up in production with the whole Tailwind library because the build step wasn't set up correctly with style shaking. That's the impact of Tailwind as a matter of fact.

If you write styles in a giant, global CSS file that covers the entire application, you have much worse problems to solve, and Tailwind won't help with them.

Modern CSS development is about writing styles encapsulated in your components. We have several ways to do it, being shadow roots, emulated encapsulation (like in Vue, Angular, Astro...), and now @scope. That's how you manage the cascade and handle much smaller files.

Sure, some unused styles might slip in the bundle, but it's no problem if it's just some hundred of bytes. Keep in mind that CSS files are effectively cached by browsers, while HTML pages are often not because they're subject to frequent changes. Using Tailwind, you're telling the browser to download kilobytes of style declarations over and over again.

And I should add: even file compressors work better with CSS files than HTML files. If you use a mixin multiple times in your CSS, you can bet that gzip/brotli compressions take care of it. Doing the same with an ustructured list of declarations among multiple pages is simply not going to happen.

Collapse
 
eshimischi profile image
eshimischi •

unocss.dev/ is more flexible and interesing project, supports Tailwind classes too

Collapse
 
fh_andn profile image
Flávio Henrique N.A. •

agora tem que esperar o shadcn atualizar e ser feliz com menos configurações

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay