VH to Tailwind Converter

Convert VH to Tailwind Class.

96

About VH to Tailwind Converter

This tool helps convert Viewport Height (vh) values into fixed Tailwind spacing classes given a specific screen height. It is useful for creating layouts that mimic full-screen proportions on specific device sizes using static utilities.

Formula

Tailwind Value = (((VH / 100) × Viewport Height) / Root Size) × 4

Examples

50vh on 768px height = 384px -> 24rem -> 96 unit
100vh on 1080px -> 1080px -> 270 unit (approx) =

Reference

  • • 50vh of 768px = 384px
  • • 384px = 96 Tailwind units
  • • Fixed snapshot of height

Frequency Asked Questions

Does Tailwind have VH classes?

Yes, `h-screen`, `h-[50vh]`.

Is this for height only?

Yes, VH is based on viewport height, generally used for height or vertical spacing.