How to write viewport width/height in tailwind css?

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

How to write viewport width/height in tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by rollin , 4 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.