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:

Class	Pixels	Rem
w-0	0px
w-px	1px
w-0.5	2px	0.125rem
w-1	4px	0.25rem
w-1.5	6px	0.375rem
w-2	8px	0.5rem
w-2.5	10px	0.625rem
w-3	12px	0.75rem
w-3.5	14px	0.875rem
w-4	16px	1rem
w-5	20px	1.25rem
w-6	24px	1.5rem
w-7	28px	1.75rem
w-8	32px	2rem
w-9	36px	2.25rem
w-10	40px	2.5rem
w-11	44px	2.75rem
w-12	48px	3rem
w-14	56px	3.5rem
w-16	64px	4rem
w-20	80px	5rem
w-24	96px	6rem
w-28	112px	7rem
w-32	128px	8rem
w-36	144px	9rem
w-40	160px	10rem
w-44	176px	11rem
w-48	192px	12rem
w-52	208px	13rem
w-56	224px	14rem
w-60	240px	15rem
w-64	256px	16rem
w-72	288px	18rem
w-80	320px	20rem
w-96	384px	24rem

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:

Class	CSS
w-1/2	width: 50%
w-1/3	width: 33.33333%
w-2/3	width: 66.66667%
w-1/4	width: 25%
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.66667%
w-5/6	width: 83.33333%
w-full	width: 100%

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:

Class	CSS
max-w-xs	max-width: 320px
max-w-sm	max-width: 384px
max-w-md	max-width: 448px
max-w-lg	max-width: 512px
max-w-xl	max-width: 576px
max-w-2xl	max-width: 672px
max-w-3xl	max-width: 768px
max-w-4xl	max-width: 898px
max-w-5xl	max-width: 1024px
max-w-6xl	max-width: 1152px
max-w-7xl	max-width: 1280px
max-w-full	max-width: 100%
max-w-screen-sm	max-width: 640px
max-w-screen-md	max-width: 768px
max-w-screen-lg	max-width: 1024px
max-w-screen-xl	max-width: 1280px
max-w-screen-2xl	max-width: 1536px

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)

Symbol	Description
p	Padding
m	Margin
-m	Negative margin

Symbol	Description
t	Top
r	Right
b	Bottom
l	Left
x	Horizontal
y	Vertical

Value	Pixels	Rem
0	0px
px	1px
0.5	2px	0.125rem
1	4px	0.25rem
1.5	6px	0.375rem
2	8px	0.5rem
2.5	10px	0.625rem
3	12px	0.75rem
3.5	14px	0.875rem
4	16px	1rem
5	20px	1.25rem
6	24px	1.5rem
7	28px	1.75rem
8	32px	2rem
9	36px	2.25rem
10	40px	2.5rem
11	44px	2.75rem
12	48px	3rem
14	56px	3.5rem
16	64px	4rem
20	80px	5rem
24	96px	6rem
28	112px	7rem
32	128px	8rem
36	144px	9rem
40	160px	10rem
44	176px	11rem
48	192px	12rem
52	208px	13rem
56	224px	14rem
60	240px	15rem
64	256px	16rem
72	288px	18rem
80	320px	20rem
96	384px	24rem
auto	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:

0:	Introduction
1:	▶︎ Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind