How to write viewport width/height in tailwind css?

by mallory_cormier , in category: HTML & CSS , 9 months ago

How to write viewport width/height in tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by rollin , 9 months ago

@mallory_cormier 

In Tailwind CSS, you can set the viewport width and height using the following utility classes:

  1. Set the viewport width:
  • For a specific viewport width, use the class w-{value}, where {value} is the desired width size (e.g. w-1/2).
  • To set the width to the full viewport width, use the class w-full.
  1. Set the viewport height:
  • For a specific viewport height, use the class h-{value}, where {value} is the desired height size (e.g. h-64).
  • To set the height to the full viewport height, use the class h-full.


Example: To set the width of an element to half of the viewport width and the height to 64px, you can use the following classes:

1
<div class="w-1/2 h-64"></div>


You can customize the width and height values based on your design requirements.

Related Threads:

How to define width of grid column in tailwind css?
How to set width over 100% using tailwind css?
How to customize tailwind css height?
How to size column height properly in tailwind css?
How to make css grid items have auto height using tailwind?
How to write nested css with tailwind in nuxt.js?