How to write Viewport width/height in Tailwind CSS-CodePudding

When I check the official Tailwind CSS documentation, it says that

Use w-screen to make an element span the entire width of the viewport.

I mean, w-screen is ok when I try to implement

width: 100vw;

But what should I do when I try to implement

width: 90vw;
height: 90vh;

CodePudding user response：

The right approach to take depends on whether the values are going to be reused.

Arbitrary Values

If there's one specific place that you need a value such as 90vw rather than it being repeated, opt for an arbitrary value. Example:

<div ></div>

Classes for those styles will be generated automatically.

Extending Your Config

For styles that are likely to be repeated or which should be part of your design system, extend your Tailwind config instead:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        'screen/90': '90vh',
      },
      width: {
        'screen/90': '90vw',
      }
    }
  }
}

Use:

<div ></div>

CodePudding user response：

You can use the Tailwind CSS utility classes to set the width and height of an element to a specific viewport width or height.

For example, to set the width of an element to 90vw, you can use the class w-90. Similarly, to set the height of an element to 90vh, you can use the class h-90.

So, in your case, you can use the following classes:

w-90
h-90