Exciting news! Tailwind CSS v3.4 has just been released, featuring dynamic viewport units, support for :has(), balanced headlines, subgrid, and a range of other enhancements. Explore the latest updates and take your web development to new heights.
"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."
Highlights
- 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.
The list contains all the noteworthy items, yet for a few additional details that didn't quite make it into this post, be sure to explore the release notes.
Enhance your projects by updating to the latest version of Tailwind CSS. Install it from npm:
$ npm install tailwindcss@latestOr try out all of the new features on Tailwind Play, right in your browser.