TailwindCSS Width and Height
Tailwind provides some simple width and height utility classes we can use to apply width and height values for our elements. Here is a quick example of a small black square created with these utility classes.
<div class="w-12 h-12 bg-black"></div>
TailwindCSS Width and Height Example
We can use a multiple of width and height classes from the default width and height values provides by Taiilwind. Here is the width classes with their respective values.
Class | Properties |
|---|---|
| w-0 | width: 0px; |
| w-0.5 | width: 0.125rem; |
| w-1 | width: 0.25rem; |
| w-1.5 | width: 0.375rem; |
| w-2 | width: 0.5rem; |
| w-2.5 | width: 0.625rem; |
| w-3 | width: 0.75rem; |
| w-3.5 | width: 0.875rem; |
| w-4 | width: 1rem; |
| w-5 | width: 1.25rem; |
| w-6 | width: 1.5rem; |
| w-7 | width: 1.75rem; |
| w-8 | width: 2rem; |
| w-9 | width: 2.25rem; |
| w-10 | width: 2.5rem; |
| w-11 | width: 2.75rem; |
| w-12 | width: 3rem; |
| w-14 | width: 3.5rem; |
| w-16 | width: 4rem; |
| w-20 | width: 5rem; |
| w-24 | width: 6rem; |
| w-28 | width: 7rem; |
| w-32 | width: 8rem; |
| w-36 | width: 9rem; |
| w-40 | width: 10rem; |
| w-44 | width: 11rem; |
| w-48 | width: 12rem; |
| w-52 | width: 13rem; |
| w-56 | width: 14rem; |
| w-60 | width: 15rem; |
| w-64 | width: 16rem; |
| w-72 | width: 18rem; |
| w-80 | width: 20rem; |
| w-96 | width: 24rem; |
| w-auto | width: auto; |
| w-px | width: 1px; |
| w-1/2 | width: 50%; |
| w-1/3 | width: 33.333333%; |
| w-2/3 | width: 66.666667%; |
| w-1/4 | width: 25%; |
| w-2/4 | width: 50%; |
| w-3/4 | width: 75%; |
| w-1/5 | width: 20%; |
| w-2/5 | width: 40%; |
| w-3/5 | width: 60%; |
| w-4/5 | width: 80%; |
| w-1/6 | width: 16.666667%; |
| w-2/6 | width: 33.333333%; |
| w-3/6 | width: 50%; |
| w-4/6 | width: 66.666667%; |
| w-5/6 | width: 83.333333%; |
| w-1/12 | width: 8.333333%; |
| w-2/12 | width: 16.666667%; |
| w-3/12 | width: 25%; |
| w-4/12 | width: 33.333333%; |
| w-5/12 | width: 41.666667%; |
| w-6/12 | width: 50%; |
| w-7/12 | width: 58.333333%; |
| w-8/12 | width: 66.666667%; |
| w-9/12 | width: 75%; |
| w-10/12 | width: 83.333333%; |
| w-11/12 | width: 91.666667%; |
| w-full | width: 100%; |
| w-screen | width: 100vw; |
| w-min | width: min-content; |
| w-max | width: max-content; |
These same classes can be used to modify the height of an element, simply replace the w, with an h.
Here is another larger square with larger width and height classes.
<div class="w-24 h-24 bg-black"></div>
Example of Larger Square
Using the width and height attributes in TailwindCSS we can easily change the width and height of any element.