Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more | Endigest
Tailwind CSS
|FrontendGet the latest tech trends every morning
Receive daily AI-curated summaries of engineering articles from top tech companies worldwide.
Tailwind CSS v3.4 introduces several new utilities and CSS feature supports to improve developer experience and modern layout capabilities.
- •Dynamic viewport units (dvh, lvh, svh) added as built-in classes to solve the mobile disappearing browser chrome issue with full-height layouts
- •New :has() variant enables styling parent elements based on their children's state, such as applying styles when a child radio input is checked
- •New * variant targets direct child elements from the parent, allowing conditional child styling without modifying child components
- •New size-* utility sets width and height simultaneously, replacing the need to write both h-* and w-* classes
- •text-balance and text-pretty utilities leverage CSS text-wrap to automatically handle headline wrapping and orphaned words
•Subgrid support added via grid-cols-subgrid, enabling child elements to inherit and align with parent grid columnsThis summary was automatically generated by AI based on the original article and may not be fully accurate.