Tailwind CSS scans your HTML files, JavaScript components, and any other templates for class names, generates the corresponding styles, and then writes them to a static CSS file. It's fast, flexible, and reliable — with zero runtime.
As a web developer, it can be a challenge to maintain consistent element sizing across different screen sizes. Tailwind CSS offers a solution with various utility classes, including viewport units such as vh, dvh, lvh, and svh. But what do these units do, and how can you use them effectively in your projects? Let's find out!
Understanding the Viewport:
The viewport is the visible area of a web page displayed on a user's screen. Its size can vary depending on the device (desktop, mobile, tablet) and browser interface elements like address bars or tab bars. We are familiar with the "Viewport height" unit which provides flexibility in height units. The "vh" unit is part of Tailwind CSS, representing 1% of the viewport height. It's ideal for creating elements that scale proportionally to the viewport's height.
Imagine a hero section that always takes up 100% of the user's screen, regardless of their device.
<div
class="h-screen bg-cover bg-center"
style="background-image: url('hero.jpg')">
</div>
With h-screen (100vh), the hero section will fill the entire viewport height, creating a visually stunning and immersive experience. The viewport height has some limitations and there are some new ways to overcome that. Here's a closer look at some potential problems you might encounter when relying solely on vh:
1. The Scrolling Shift:
A significant problem with vh units arise when dealing with mobile browsers. These browsers often hide address bars or tab bars when the user scrolls down. This dynamic change in viewport height can cause elements sized with vh units to jump or shift unexpectedly, creating a jarring user experience.
Imagine a navigation bar at the top of the page. When the user scrolls down on a mobile device and the address bar hides, the navigation bar suddenly appears larger as it now occupies a larger percentage of the reduced viewport height. This change can be visually unappealing and disruptive.
2. Layout Inconsistencies Across Browsers:
The way browsers handle address bars and other UI elements can vary slightly, leading to inconsistencies in how elements are sized and behave across different browsers on the same device. This inconsistency can be frustrating for both developers and users.
3. Limited Control in Dynamic Layouts:
While vh is great for static layouts, it can be challenging to achieve more complex dynamic layouts that respond to user interactions or viewport changes. For example, creating a sticky header that shrinks on the scroll might require additional workarounds when using only vh.
The Solutions and Alternatives of vh
Fortunately, there are solutions to these problems:
Embracedvh (Dynamic Viewport Height): Tailwind CSS v3.4 introduced dvh, which considers the current viewport height, including or excluding user interface elements. This ensures a more dynamic and responsive layout that adapts to changes in the viewport as the user scrolls.
Combine with Media Queries: For more precise control over element behavior at different screen sizes, consider combining with media queries. This allows you to adjust sizing based on specific viewport breakpoints, ensuring a consistent user experience across various devices.
Explore Other Options: Depending on your layout requirements, consider using alternative Tailwind utility classes such as flex or grid in combination with pixel values or responsive sizing options like sm, md, lg, etc..
Dynamic Viewport Heightdvh
While vh is great for static layouts, mobile browsers often hide address bars or tab bars when you scroll down. This can cause elements sized with vh to jump or shift unexpectedly. Enter dvh (dynamic viewport height)!
dvh takes into account the current viewport height, including or excluding user interface elements. This ensures a more dynamic and responsive layout that adapts to changes in the viewport as the user scrolls.
Imagine a navigation bar that shrinks as the user scrolls down on mobile, maximizing screen real estate.
With a dynamic height using dvh classes, the browser navigation bar will remain fixed at the top but adjust its height based on the viewport changes during scrolling.
Largest Viewport Heightlvh
lvh represents 1% of the viewport height, assuming all UA interfaces like address bars are hidden. This essentially behaves like the traditional vh in modern browsers, ensuring consistent sizing even with dynamic UI elements.
Imagine a content section that takes up the full height available on the screen, excluding any browser UI elements.
<div class="h-lvh">
</div>
With h-screen, the content section will fill the entire viewport height, excluding potential browser UI elements, offering a predictable layout.
Smallest Viewport Heightsvh
svh represents 1% of the viewport height, always excluding UA interfaces. This is ideal for situations where you want to ensure content remains fully visible regardless of browser UI elements.
Imagine a footer that always stays at the bottom of the screen, even with a visible address bar on mobile.
<div class="h-svh">
</div>
<footer
class="fixed bottom-0 left-0 w-full bg-gray-800
py-2 px-4 text-white flex justify-center items-center">
</footer>
With fixedbottom-0 and a height defined using svh classes, the footer will remain fixed at the bottom, adjusting its height to accommodate browser UI elements, and keeping your content in view.
Choosing the Right Unit:
The best unit for your project depends on your desired layout behavior. Here's a quick guide:
For static layouts with full-height elements**:** Use vh or lvh.
For dynamic layouts with responsive elements: Use dvh.
For content that should always be visible: Use svh.
Try using these units in your Tailwind projects to determine the best fit for your specific requirements. Mastering vh, dvh, lvh, and svh will enable you to effectively manage the viewport and develop truly responsive and user-friendly web experiences. A short video example was found on twitter.
Conclusion
While vh is a valuable tool in your Tailwind CSS arsenal, being aware of its limitations is crucial. By understanding potential issues and utilizing alternative solutions like dvh, media queries, and other sizing options, you can effectively create responsive and user-friendly web experiences that adapt seamlessly to different screen sizes and browser behaviors.
Thanks ...
References
https://tailwindcss.com/docs/height#dynamic-viewport-height
https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
https://tailscan.com/blog/tailwind-css-dynamic-viewport-unit-classes
