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.

CSS has a new logo (and new features)! 🎉

Best Codes ・ Nov 23

#css #webdev #programming #discuss

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!

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>

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>

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>

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>

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 #discuss 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