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

Question

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;

Answer 1

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 class="w-[90vw] h-[90vh]"></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 class="w-screen/90 h-screen/90"></div>

Answer 2

I find useful to create a plugin for this case
Change Tailwind config into this (add plugin and default values)
const plugin = require('tailwindcss/plugin')
// create default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});
module.exports = {
// ...
plugins: [
plugin(function ({matchUtilities, theme}) {
matchUtilities(
{
'w-screen': width => ({
width: `${width}vw`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
),
matchUtilities(
{
'h-screen': height => ({
height: `${height}vh`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
)
})
],
}
It will allow you to use w-screen or h-screen utility with any vw or vh values from 0 to 95 with step 5 (0,5,10...95). w-screen with no values will be 100vw (as current behaviour)
<div class="w-screen h-screen-35">
Default width screen is still working
</div>
<div class="w-screen-50 h-screen-[15]">
50vw width, 15vh from JIT
No need to set h-screen-[15vh] as we already know we're working with vh units
</div>
In your case it will be w-screen-90 h-screen-90
You may extend config for reusable classes with screenSize key
module.exports = {
theme: {
extend: {
screenSize: {
33: 33 // just an example
}
},
},
}
Usage
<div class="w-screen-[22] h-screen-33">
33vh from user config, 22vw from JIT
</div>
DEMO

Answer 3

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