DEV Community

Cover image for What's New in Tailwind v4 πŸš€
Best Codes
Best Codes

Posted on • Edited on

What's New in Tailwind v4 πŸš€

Several months ago (at the time of writing), Tailwind CSS open-sourced its work on Tailwind CSS v4.0. (You can find it on GitHub here).

Recently, Tailwind announced a public beta for Tailwind CSS 4, and in this article I'll cover the highlights of the new version. So let's get started!

General Structure Changes

Tailwind has undergone a rework of its engine that drastically improves performance. Full builds are up to 5x faster, incremental builds up to 100x (you read that right) faster.

Tailwind v4 also has a unified toolchain. Remember having to install autoprefixer and postcss in all of your Tailwind projects? You won't have to anymore!

Taking an interesting approach to configuration, Tailwind is moving from JS config files to CSS config. This means you will configure plugins, themes, and other behavior directly in your CSS.

Tailwind is also getting support for the latest features in CSS.

Now, with the general changes out the way, let's see what specifically Tailwind is adding!


New Features πŸŽ‰

If you want to try Tailwind v4, view the getting started docs for v4 (beta).

If you want to easily upgrade your project, just run npx @tailwindcss/upgrade@next and Tailwind will do it for you. Be careful! There may be breaking changes.

Colors

The Tailwind v4 color palette is based on oklch instead of rgb. The RGB color system is a bit limiting in terms of consistency across screens and vibrancy. Since the oklch color system is now widely supported, Tailwind v4 is going to take advantage of it!

Color palette.

Container queries

Tailwind v4 now supports container queries by default. If you don't know what container queries are, let me explain.

You know things in Tailwind like md:, sm:, etc. that allow you to customize what CSS is applied on different screen sizes?
In those cases, the classes refer to the size of a window. With container queries, they can refer to the size of a container instead.

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- Content -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

In the above example, the grid will have 3 columns β€” not when the window reaches the small size, but when the container does. As you can imagine, this is super handy in responsive layouts.

Field sizing

field-sizing isn't a universally supported CSS feature yet, but it's going to be awesome when it is! Instead of needing JS to create auto-resizing textareas, you can use CSS only.
And Tailwind v4 supports it!

Try out the demo on Tailwind's website.
You can now simply add the field-sizing-content class to your textarea to use it.

Descendant updates

Tailwind stable (you may not know this) has an * variant that allows you to target direct children of an element with a class. For example:

<div class="*:p-2">
  <p>Hello</p>
  <p>
    <span>World!</span>
  </p>
  <!-- Both <p> elements will have `p-2`, but not the <span> -->
</div>
Enter fullscreen mode Exit fullscreen mode

The new ** variant in Tailwind v4 will target all descendants:

<div class="**:p-2 **:data-world:opacity-50">
  <p>Hello</p>
  <p>
    <span data-world>World!</span>
  </p>
  <!-- Both <p> elements and the <span> element will have `p-2`. -->
  <!-- The <span> element will have the `opacity-50` class. -->
</div>
Enter fullscreen mode Exit fullscreen mode

Inset shadows (and rings)

It will also now be easy to create inset shadows and rings on elements using the inset-shadow and inset-ring classes.

<button class="shadow-md inset-shadow-sm inset-shadow-white/20 ring ring-blue-600 inset-ring inset-ring-white/15">Send</button>
Enter fullscreen mode Exit fullscreen mode

Inset shadow from tailwind blog.


There's much more!

If you want to see all the new additions, go to https://tailwindcss.com/docs/v4-beta and check them out!

This post is a discussion post! That's why I kept it short; I want to know what you think!
I know a lot of you Tailwind haters will probably have some feedback for me πŸ˜†
There are definitely some controversial new features and I want to get some opinions πŸ™‚

Summary: Leave a comment!


Thanks for reading!
BestCodes

Top comments (6)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Container queries will be useful.

Collapse
 
best_codes profile image
Best Codes

Yeah, I'm looking forward to that the most

Collapse
 
best_codes profile image
Best Codes

I can't wait for it to be stable! Right now, there are lots of 'legacy peer dependency' warnings from npm, so it will be nice to easily use it on my site. :)

What do you all think?

Collapse
 
dsaga profile image
Dusan Petkovic

Container queries seam like they can be useful, good article to get up to speed with it

Collapse
 
best_codes profile image
Best Codes

Thanks for reading :)

Collapse
 
best_codes profile image
Best Codes

The #discuss tag got removed. I guess I'll have to edit my post for that...