Responsive layouts
Breakpoints
| Prefix |
Min Width |
Example Usage |
sm: |
640px |
sm:text-lg → applies at > 640px |
md: |
768px |
md:flex-row → applies at > 768px |
lg: |
1024px |
lg:grid-cols-3 → applies at > 1024px |
xl: |
1280px |
xl:p-8 → applies at > 1280px |
2xl: |
1536px |
2xl:text-2xl → applies at > 1536px |
Grid layouts
1
2
3
4
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>Column 1</div>
<div>Column 2</div>
</div>
|
1
| <div class="p-2 md:p-4 lg:p-8">Responsive padding</div>
|
centering with flexbox
1
2
3
| <div class="flex items-center justify-center h-screen">
<p>Centered</p>
</div>
|
row column (mobile first)
1
2
3
4
| <div class="flex flex-col md:flex-row">
<div class="flex-1">Left</div>
<div class="flex-1">Right</div>
</div>
|
Widths
| Class |
Description |
CSS Value |
w-0 |
Width 0 |
0rem / 0px |
w-px |
Width of 1px |
1px |
w-0.5 |
Width 0.125rem |
2px |
w-1 |
Width 0.25rem |
4px |
w-1.5 |
Width 0.375rem |
6px |
w-2 |
Width 0.5rem |
8px |
w-2.5 |
Width 0.625rem |
10px |
w-3 |
Width 0.75rem |
12px |
w-3.5 |
Width 0.875rem |
14px |
w-4 |
Width 1rem |
16px |
w-5 |
Width 1.25rem |
20px |
w-6 |
Width 1.5rem |
24px |
w-8 |
Width 2rem |
32px |
w-10 |
Width 2.5rem |
40px |
w-12 |
Width 3rem |
48px |
w-16 |
Width 4rem |
64px |
w-20 |
Width 5rem |
80px |
w-24 |
Width 6rem |
96px |
w-32 |
Width 8rem |
128px |
w-40 |
Width 10rem |
160px |
w-48 |
Width 12rem |
192px |
w-56 |
Width 14rem |
224px |
w-64 |
Width 16rem |
256px |
w-72 |
Width 18rem |
288px |
w-80 |
Width 20rem |
320px |
w-96 |
Width 24rem |
384px |
w-auto |
Auto width |
auto |
w-full |
Full width of parent |
100% |
w-screen |
Full width of viewport |
100vw |
w-min |
Width = min-content |
min-content |
w-max |
Width = max-content |
max-content |
w-fit |
Width = fit-content |
fit-content |
w-1/2 |
Half width |
50% |
w-1/3 |
One third |
33.333% |
w-2/3 |
Two thirds |
66.666% |
w-1/4 |
One quarter |
25% |
w-2/4 |
Two quarters |
50% |
w-3/4 |
Three quarters |
75% |
w-1/5 |
One fifth |
20% |
w-2/5 |
Two fifths |
40% |
w-3/5 |
Three fifths |
60% |
w-4/5 |
Four fifths |
80% |
w-1/6 |
One sixth |
16.666% |
w-2/6 |
Two sixths |
33.333% |
w-3/6 |
Three sixths |
50% |
w-4/6 |
Four sixths |
66.666% |
w-5/6 |
Five sixths |
83.333% |
w-1/12 |
One twelfth |
8.333% |
w-2/12 |
Two twelfths |
16.666% |
w-3/12 |
Three twelfths |
25% |
w-4/12 |
Four twelfths |
33.333% |
w-5/12 |
Five twelfths |
41.666% |
w-6/12 |
Six twelfths |
50% |
w-7/12 |
Seven twelfths |
58.333% |
w-8/12 |
Eight twelfths |
66.666% |
w-9/12 |
Nine twelfths |
75% |
w-10/12 |
Ten twelfths |
83.333% |
w-11/12 |
Eleven twelfths |
91.666% |
w-[100px] |
Arbitrary fixed width |
100px |
w-[50%] |
Arbitrary percentage width |
50% |
w-[calc(100%-2rem)] |
Arbitrary calc expression |
calc(100% - 2rem) |
Typography
** predefined color classes **
1
2
3
4
5
6
| <p class="text-red-500">Red text</p>
<p class="bg-slate-100 text-slate-800">
Light slate background, dark slate text
</p>
<p class="text-blue-700">Blue text</p>
<p class="bg-gradient-to-r from-pink-500 to-yellow-500">Gradient background</p>
|
Tailwind columns
Grid
1
2
3
4
5
| <div class="grid grid-cols-3 gap-4">
<div class="bg-blue-200 p-4">Column 1</div>
<div class="bg-blue-300 p-4">Column 2</div>
<div class="bg-blue-400 p-4">Column 3</div>
</div>
|
Flexbox
Use flex-1 so columns expand equally:
1
2
3
4
5
| <div class="flex flex-col md:flex-row h-64">
<div class="flex-1 bg-red-300">Column 1</div>
<div class="flex-1 bg-green-300">Column 2</div>
<div class="flex-1 bg-blue-300">Column 3</div>
</div>
|
Padding
Padding (p, px, py, pt, pr, pb, pl)
All sides: p-{n}
X-axis (left + right): px-{n}
Y-axis (top + bottom): py-{n}
Individual sides:
pt-{n} → top
pr-{n} → right
pb-{n} → bottom
pl-{n} → left
1
2
3
| <div class="p-4">padding: 1rem all sides</div>
<div class="px-6">padding-left/right: 1.5rem</div>
<div class="pt-2">padding-top: 0.5rem</div>
|
| Class |
rem value |
px value |
p-0 |
0rem |
0px |
p-0.5 |
0.125rem |
2px |
p-1 |
0.25rem |
4px |
p-1.5 |
0.375rem |
6px |
p-2 |
0.5rem |
8px |
p-2.5 |
0.625rem |
10px |
p-3 |
0.75rem |
12px |
p-3.5 |
0.875rem |
14px |
p-4 |
1rem |
16px |
p-5 |
1.25rem |
20px |
p-6 |
1.5rem |
24px |
p-7 |
1.75rem |
28px |
p-8 |
2rem |
32px |
p-9 |
2.25rem |
36px |
p-10 |
2.5rem |
40px |
p-11 |
2.75rem |
44px |
p-12 |
3rem |
48px |
p-14 |
3.5rem |
56px |
p-16 |
4rem |
64px |
p-20 |
5rem |
80px |
p-24 |
6rem |
96px |
p-28 |
7rem |
112px |
p-32 |
8rem |
128px |
p-36 |
9rem |
144px |
p-40 |
10rem |
160px |
p-44 |
11rem |
176px |
p-48 |
12rem |
192px |
p-52 |
13rem |
208px |
p-56 |
14rem |
224px |
p-60 |
15rem |
240px |
p-64 |
16rem |
256px |
p-72 |
18rem |
288px |
p-80 |
20rem |
320px |
p-96 |
24rem |
384px |
Margin
1
2
3
| <div class="m-8">margin: 2rem all sides</div>
<div class="mx-auto">center horizontally</div>
<div class="-mt-4">negative top margin</div>
|
Gaps
1
2
3
4
5
6
7
| <div class="grid grid-cols-3 gap-4">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="flex gap-x-6">
<span>A</span><span>B</span><span>C</span>
</div>
|
| Class |
Size (rem) |
Pixels |
0 |
0rem |
0px |
0.5 |
0.125rem |
2px |
1 |
0.25rem |
4px |
1.5 |
0.375rem |
6px |
2 |
0.5rem |
8px |
2.5 |
0.625rem |
10px |
3 |
0.75rem |
12px |
3.5 |
0.875rem |
14px |
4 |
1rem |
16px |
5 |
1.25rem |
20px |
6 |
1.5rem |
24px |
8 |
2rem |
32px |
10 |
2.5rem |
40px |
12 |
3rem |
48px |
16 |
4rem |
64px |
20 |
5rem |
80px |
24 |
6rem |
96px |
32 |
8rem |
128px |
40 |
10rem |
160px |
48 |
12rem |
192px |
56 |
14rem |
224px |
64 |
16rem |
256px |
72 |
18rem |
288px |
80 |
20rem |
320px |
96 |
24rem |
384px |