Last checked and updated on 17 May 2026
What Is New in Tailwind CSS 3.4
| Category | Highlights |
|---|---|
| New Features | Dynamic viewport units (dvh, lvh, svh), :has() parent-state variant, * child-target variant, size-* utilities, text-balance & text-pretty wrappers, CSS subgrid support, forced-colors variant and utilities. |
| Improvements | Extended min-/max-width, min-height scales to full spacing range, opacity scale now includes every 5 % step, grid-rows scale expanded to 12 rows. |
How can I build reliable full-height layouts on mobile devices?
Tailwind CSS 3.4 adds first-class support for dynamic viewport units that adapt to browser chrome.
- Use
h-dvh,h-lvhorh-svhfor height that respects the visible viewport. - Corresponding min- and max-height utilities are also available (e.g.,
min-h-dvh). - Arbitrary values work as before:
min-h-[75dvh].
<div class="h-dvh bg-gray-100">Full-height content</div>
How do I style a parent element based on its children or target children directly?
Tailwind CSS 3.4 introduces the :has() variant and a new * variant for child selectors.
has-[:checked]:bg-indigo-50lets a wrapper change when an inner radio is checked.- The
*variant applies utilities to direct children, e.g.,*:rounded-fullon list items. - Both variants can be combined with other modifiers like
hover:*:underline.
<label class="has-[:checked]:ring-2 has-[:checked]:ring-indigo-500">
<input type="radio" class="accent-indigo-500">
Option
</label>
<ul class="*:px-2 *:py-1 *:bg-sky-50">
<li>Item</li>
</ul>
What shortcuts exist for setting width and height together and for using larger scale values?
Tailwind CSS 3.4 adds size-* utilities and extends several scale families.
size-10replaces the verboseh-10 w-10pattern.- Min-/max-width and min-height now include the full spacing scale (e.g.,
min-w-12). - Opacity steps are now every 5 % (e.g.,
opacity-35). - Grid rows are available up to
grid-rows-12.
<img class="size-14 rounded-full">
<div class="min-w-12 bg-blue-100">Content</div>
<div class="opacity-35">Semi-transparent</div>
How does Tailwind 3.4 help me use modern CSS layout and accessibility features?
Tailwind CSS 3.4 brings native support for CSS subgrid, text-wrap utilities, and forced-colors mode.
- Use
grid-cols-subgridto inherit column definitions from a parent grid. text-balanceappliestext-wrap: balancefor automatically balanced headlines.text-prettyappliestext-wrap: prettyto avoid orphaned words.- The
forced-colorsvariant andforced-color-adjust-*utilities let you fine-tune UI for Windows high-contrast mode.
<h2 class="text-balance text-2xl">Balanced Headline</h2>
<div class="grid grid-cols-4 gap-4">
<div class="col-span-3 grid grid-cols-subgrid gap-2">
<div class="col-start-2">Item</div>
</div>
</div>
<button class="forced-colors:appearance-auto">Toggle</button>
Frequently Asked Questions
Does Tailwind CSS 3.4 support dynamic viewport units out of the box?
Yes you can use classes like h-dvh, h-lvh and h-svh to size elements relative to the visible viewport.
Can I style a parent element when a child input is checked?
Yes the has-[:checked] variant lets you apply utilities such as has-[:checked]:bg-indigo-50.
Is there a shortcut to set width and height simultaneously?
Yes the size-* utilities replace separate h-* and w-* classes, for example size-10.
How do I make headlines automatically balance line breaks?
Apply the text-balance utility which generates text-wrap: balance in supported browsers.
Does Tailwind 3.4 include support for CSS subgrid?
Yes you can use grid-cols-subgrid and related classes to inherit grid tracks from a parent.
What variant helps me adjust styles for forced-colors mode?
The forced-colors variant and forced-color-adjust utilities let you fine-tune appearance in high-contrast mode.