Add svh, lvh, and dvh values to default theme

[adamwathan]

This PR adds support for basic dynamic viewport units to the height, min-height, and max-height utilities out of the box:

Class	CSS
h-svh	height: 100svh
h-lvh	height: 100lvh
h-dvh	height: 100dvh
min-h-svh	min-height: 100svh
min-h-lvh	min-height: 100lvh
min-h-dvh	min-height: 100dvh
max-h-svh	max-height: 100svh
max-h-lvh	max-height: 100lvh
max-h-dvh	max-height: 100dvh

These are a newer CSS feature that help solve the problem of building full-height interfaces on mobile devices where parts of the UI are dynamically shown/hidden as the user scrolls, like the URL bar on iOS Safari.

This has always been possible in Tailwind of course by just adding these values to your config file, but this PR adds the values above by default so they are just there out of the box when you create a new project.

We've opted not to add the equivalent utilities for the svw, lvw, and dvw units for now because there's not really any real-world examples I can find where they are beneficial, but of course you can always add them to your config or use arbitrary values:

<div class="min-w-[100dvw]">
  <!-- ... -->
</div>

Similarly, if you need values other than 100 in your project, you can use arbitrary values for those as well:

<div class="min-h-[83lvh]">
  <!-- ... -->
</div>

So at the end of the day this is very much a convenience PR but because these particular values are so useful I think it's worth helping people save the extra 5 characters out of the box.

[hyunbinseo]

Global dvh() support is still at 84.27%.

Would there be a way to fallback from dvh to vh using classes only?

Currently using the following workaround,

@layer utilities {
  .min-h-screen {
    min-height: 100vh; /* Fallback */
    min-height: 100dvh;
  }
  .h-screen {
    height: 100vh; /* Fallback */
    height: 100dvh;
  }
}

because the following classes result in a CSS conflict error.

<div class="min-h-[100dvh] min-h-screen"></div>

'min-h-[100dvh]' applies the same CSS properties as 'min-h-screen'.(cssConflict)

[ArnaudBarre]

I'm confused, it this wanted?

[jesusvallez]

Global dvh() support is still at 84.27%.

Would there be a way to fallback from dvh to vh using classes only?

Currently using the following workaround,

@layer utilities {
  .min-h-screen {
    min-height: 100vh; /* Fallback */
    min-height: 100dvh;
  }
  .h-screen {
    height: 100vh; /* Fallback */
    height: 100dvh;
  }
}

because the following classes result in a CSS conflict error.

<div class="min-h-[100dvh] min-h-screen"></div>

'min-h-[100dvh]' applies the same CSS properties as 'min-h-screen'.(cssConflict)

What is the status of this matter? If in the same class, if I add h-dvh h-screen there is a conflict