Tailwind CSS - New dynamic viewport unit classes using dvh, lvh and svh

The vh unit in CSS has been a very convenient addition for creating full-height application layouts. But when disappearing menu bars in browsers were introduced, it made the vh unit much less useful.

Recently some new CSS units were added to the CSS 4 spec and are widely supported by browsers now. And that means that finally, Tailwind CSS added support in the latest update (v3.4) and introduces a bunch of classes that use these new units: dvh, lvh, and svh, to be specific.

Below we'll go through these three units, what they do and what new Tailwind CSS classes you can use to make use of them.

Understanding the new units

The new units - svh, lvh, and dvh, each have distinct features:

• svh (Smallest Viewport Height): The svh unit reflects the smallest possible viewport height visible to the user, excluding all user agent interface elements. Unlike the vh unit, the svh excludes the address bar that comes with a mobile browser.
• lvh (Largest Viewport Height): The lvh unit represents the largest possible viewport height visible to the user. It behaves the same as the traditional 100vh.
• dvh (Dynamic Viewport Height): The dvh unit reflects the current viewport height, excluding the user agent's interface. The dvh unit updates as the current viewport height changes and shows how much vertical viewport height the user agent's interface currently occupies. For instance, this unit will change as you scroll down a page on mobile, as the URL bar moves out of the screen.

New Classes and Their Uses

In Tailwind CSS v3.4, the new classes include h-svh, h-lvh, h-dvh, min-h-svh, min-h-lvh, min-h-dvh, max-h-svh, max-h-lvh, and max-h-dvh. Here's how you can use them:

• h-dvh: This class makes an element span the entire height of the viewport, which changes as the browser UI expands or contracts.
• h-lvh: This class sets an element’s height to the largest possible height of the viewport, behaving the same as 100vh.
• h-svh: This class sets an element’s height to the smallest possible height of the viewport. This may not be the full height of the viewport, as it excludes the browser menu bar, for example.

The 'min-h' and 'max-h' classes function similarly, setting the minimum and maximum height respectively.

Browser Compatibility

These new classes are compatible with most modern browsers.
Unless you have to support older browsers like Safari 14, these classes can safely be used.