Remove VH and use DVH/LVH/SVH units

[spyridonas]

I was reading this tweet thread https://twitter.com/housecor/status/1519286593269518338 and it seems like using the VH is a bad idea and should be avoided.
Maybe replace it with lvh ? (and keep the classes the same) or introduce dvh/lvh/svh variances (min-h-screen / min-dvh-screen / etc)
According to the tweet thread, the vh currently works as lvh so that will be a good starting point

[ethan-auroria]

Hey there, just wanna revive this discussion. I think it is reasonable to leave vh in while adding dvh/lvh/svh, just for the sake of backwards compatibility

[spyridonas]

It's not clear in the original conversation, but the proposed for implementation units are *vh and *vw (where * one of d/l/s)

[marlun]

I was working on a design with buttons in the bottom of the viewport on mobile and would really want to be able to set the body to 100dvh.

[RingoDev]

I would also like to have this feature, it would be quite helpful.
Also all major browsers now fully support these units: https://caniuse.com/viewport-unit-variants

[adamwathan]

Definitely could be cool to add these as named values to core eventually. In the mean time though you can always use these as arbitrary values:

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

[marlun]

In the mean time though you can always use these as arbitrary values:

I'm playing around with build free development and arbitrary values don't work when you're just using <script src="https://cdn.tailwindcss.com"></script> right? I know it's not recommended for production use but it's such a breath of fresh air to work without any build setup.

[babakfp]

How is it going to be?

1:

.h-dynamic-screen { height: 100dvh }

2:

.h-screen { height: 100vh; height: 100dvh }

[pedroapfilho]

to be backwards compatible, I think that it'll have to set both for the time being

[kwameopareasiedu]

You can just add a custom Tailwind utility class

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .hd-screen {
    height: 100dvh;
  }
}

/* Other styles */

[cti1650]

How about doing it like this?

module.exports = {
 ...
  theme: {
    extend: {
      height: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      minHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      maxHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      }
    },
  },
 ...
};

[riccardolardi]

How about doing it like this?

module.exports = {
 ...
  theme: {
    extend: {
      height: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      minHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      maxHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      }
    },
  },
 ...
};

The current Tailwind typing seem to expect a string not a string array. Is this still safe to do?

[adamwathan]

All this stuff will be in the next Tailwind release for what it's worth — PR to add them by default was merged in May 👍

#11317

[hibatillah]

So when do you think the next release will be?? it's been a while since the last release

[adamwathan]

Probably December.

[patchthecode]

so... done?

[adamwathan]

@patchthecode Yeah: https://tailwindcss.com/blog/tailwindcss-v3-4