The box model sets the sizing of the elements based on a few CSS properties.

We can define:

1. The element width and height
2. Padding and Margin
3. Border

The element width and height

In Tailwind CSS, the element size is defined using w- (width) and h- (height), combined with the values.

Here’s a handy table of values you can use to set a fixed value:

You can use a custom value, if you prefer, using this syntax: w-[200px] (use any unit you want, like em or rem)

You can set the width to auto with w-auto, so it’s calculated automatically by the browser (the default behavior)

You can set the width of an element as a percentage of the container’s width, so you can say for example w-1/2 to make it 50% of the container’s width:

All those values also work for h-* to set the height.

You can also use w-screen to set the width to be 100% of the viewport width, 100vw (which means the entire browser window) and height can be set using h-screen to set the height to be 100% the viewport height.

Sometimes you want to also set a maximum width. You do so using max-w-VALUE:

You have utility classes for min-width too, also height, min-height and max-height.

Margin and Padding

m and p lets you set margin and padding values.

Compose those 3 tables. Add a dash before the value (e.g. pt-2, m-auto)

Examples:

• mt-40
• -mr-2
• m-20
• p-10
• py-10

I sometimes use margin: 0 auto to center things, the class mx-auto applies it.

Lessons in this unit: