TailwindCSS now with dynamic viewport units, :has() support, balanced headlines, subgrid, and more!

Tailwind v3.4 is now released with dynamic viewport units, :has() support, balanced headlines, subgrid, and more!

In the release announcement, Adam Wathan mentions that many of these features are directly related to them building a new Catalyst UI kit:

There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwind CSS v3.4.

As always the improvements range from things you’ve been angry about for years, to supporting CSS features you’ve never even heard of and probably can’t even use at work.

The highlights include:

• Dynamic viewport units: Full-height elements that actually work on mobile.
• New :has() variant: Style parent elements based on their children.
• Style children with the * variant: We’ll probably regret giving you this one.
• New size-* utilities: Set width and height at the same time, finally.
• Balanced headlines with text-wrap utilities: No more max-width tweaking or responsive line breaks.
• Subgrid support: That grid feature you struggle to understand, finally in Tailwind CSS.
• Extended min-width, max-width, and min-height scales: Now min-w-12 is a real class.
• Extended opacity scale: For those moments when neither 60% or 70% were quite right.
• Extended grid-rows-* scale: Might as well make it match the column scale.
• New forced-colors variant: Easily fine-tune your site for forced colors mode.
• New forced-color-adjust utilities: For even more forced colors fine-tuning.

See the full announcement for all the details on this new release and you can start using it today by running:

npm install tailwindcss@latest