Скачать или смотреть How to Effectively Use Viewport Width and Height in Tailwind CSS

Discover how to set viewport width and height using Tailwind CSS. Learn about arbitrary values and extending configuration to create responsive designs effortlessly.
---
This video is based on the question https://stackoverflow.com/q/74614394/ asked by the user 'chagatai' ( https://stackoverflow.com/u/13932449/ ) and on the answer https://stackoverflow.com/a/74615709/ provided by the user 'Nathan Dawson' ( https://stackoverflow.com/u/1310929/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to write Viewport width/height in Tailwind CSS

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Effectively Use Viewport Width and Height in Tailwind CSS

When working with layouts in web development, you may encounter situations where you need to control the dimensions of elements relative to the viewport—the visible area of a web page. In Tailwind CSS, handling viewport dimensions can seem daunting at first, especially for values like 90vw (90% of the viewport width) or 90vh (90% of the viewport height). Fortunately, Tailwind CSS provides simple methods to achieve this.

In this guide, we'll explore how to implement viewport width and height using Tailwind CSS, breaking down the approaches for both one-time use values and reusable configurations.

Understanding Viewport Dimensions

Before diving into implementation, let's clarify what viewport dimensions mean in CSS:

vw (Viewport Width): 1vw is equal to 1% of the width of the viewport. Therefore, 90vw would be 90% of the viewport's width.

vh (Viewport Height): 1vh is equal to 1% of the height of the viewport. Thus, 90vh represents 90% of the viewport's height.

Implementing Viewport Width/Height with Tailwind

You may want to apply styles that span 90% of the viewport's width and height. Let’s look at two approaches you can use in Tailwind CSS.

1. Using Arbitrary Values

If you only need a specific value such as 90vw for a single occurrence, the easiest way is to use Tailwind's arbitrary value feature. This allows you to directly specify the dimensions you need.

Example:

[[See Video to Reveal this Text or Code Snippet]]

In this example:

w-[90vw] applies the width of 90% of the viewport.

h-[90vh] applies the height of 90% of the viewport.

This method is especially useful when you have unique cases that won’t be repeated throughout your project.

2. Extending Your Configuration

For styles that you'll use frequently or that should align with your design system, you may want to extend your Tailwind CSS configuration. This method allows you to define custom values that are reusable throughout your project.

Step-by-Step Guide:

Open your Tailwind Config file (typically tailwind.config.js).

Extend the theme to include the new height and width values.

Here’s how you can do this:

[[See Video to Reveal this Text or Code Snippet]]

Through this configuration:

You’re adding new classes: w-screen/90 for width and h-screen/90 for height.

Using Custom Classes

Now that your configuration is set up, you can utilize these new classes in your HTML:

[[See Video to Reveal this Text or Code Snippet]]

With this setup, you can maintain consistent design elements throughout your project while sticking to the responsive ethos that Tailwind CSS offers.

Conclusion

Working with viewport dimensions in Tailwind CSS doesn't have to be complicated. By understanding the difference between applying arbitrary values for one-off styles and extending your configuration for repeated use, you can create responsive designs efficiently. Whether you opt for direct values or configure reusable styles, Tailwind CSS provides the flexibility to manage your layouts effectively.

Now that you have the tools needed to implement viewport width and height in Tailwind CSS, happy coding!