Post

Tailwind Cheatsheet

Posted Updated
By Daniel Florido
4 min read

Responsive layouts

Breakpoints

PrefixMin WidthExample Usage
sm:640pxsm:text-lg → applies at > 640px
md:768pxmd:flex-row → applies at > 768px
lg:1024pxlg:grid-cols-3 → applies at > 1024px
xl:1280pxxl:p-8 → applies at > 1280px
2xl:1536px2xl: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>

positioning with flexbox

center element

1
2
3
4

<div class="flex items-center justify-center h-screen">
  <p>Centered</p>
</div>

3 even columns with flexbox

1
2
3
4
5

<div class="flex">
  <div class="basis-1/3 bg-red-200 p-4">Column 1</div>
  <div class="basis-1/3 bg-green-200 p-4">Column 2</div>
  <div class="basis-1/3 bg-blue-200 p-4">Column 3</div>
</div>

space between elements

1
2
3
4

<div class="flex justify-between">
  <div class="bg-blue-500 p-4">Left</div>
  <div class="bg-red-500 p-4">Right</div>
</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

ClassDescriptionCSS Value
w-0Width 00rem / 0px
w-pxWidth of 1px1px
w-0.5Width 0.125rem2px
w-1Width 0.25rem4px
w-1.5Width 0.375rem6px
w-2Width 0.5rem8px
w-2.5Width 0.625rem10px
w-3Width 0.75rem12px
w-3.5Width 0.875rem14px
w-4Width 1rem16px
w-5Width 1.25rem20px
w-6Width 1.5rem24px
w-8Width 2rem32px
w-10Width 2.5rem40px
w-12Width 3rem48px
w-16Width 4rem64px
w-20Width 5rem80px
w-24Width 6rem96px
w-32Width 8rem128px
w-40Width 10rem160px
w-48Width 12rem192px
w-56Width 14rem224px
w-64Width 16rem256px
w-72Width 18rem288px
w-80Width 20rem320px
w-96Width 24rem384px
w-autoAuto widthauto
w-fullFull width of parent100%
w-screenFull width of viewport100vw
w-minWidth = min-contentmin-content
w-maxWidth = max-contentmax-content
w-fitWidth = fit-contentfit-content
w-1/2Half width50%
w-1/3One third33.333%
w-2/3Two thirds66.666%
w-1/4One quarter25%
w-2/4Two quarters50%
w-3/4Three quarters75%
w-1/5One fifth20%
w-2/5Two fifths40%
w-3/5Three fifths60%
w-4/5Four fifths80%
w-1/6One sixth16.666%
w-2/6Two sixths33.333%
w-3/6Three sixths50%
w-4/6Four sixths66.666%
w-5/6Five sixths83.333%
w-1/12One twelfth8.333%
w-2/12Two twelfths16.666%
w-3/12Three twelfths25%
w-4/12Four twelfths33.333%
w-5/12Five twelfths41.666%
w-6/12Six twelfths50%
w-7/12Seven twelfths58.333%
w-8/12Eight twelfths66.666%
w-9/12Nine twelfths75%
w-10/12Ten twelfths83.333%
w-11/12Eleven twelfths91.666%
w-[100px]Arbitrary fixed width100px
w-[50%]Arbitrary percentage width50%
w-[calc(100%-2rem)]Arbitrary calc expressioncalc(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>

center text

1

text-center

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>
Classrem valuepx value
p-00rem0px
p-0.50.125rem2px
p-10.25rem4px
p-1.50.375rem6px
p-20.5rem8px
p-2.50.625rem10px
p-30.75rem12px
p-3.50.875rem14px
p-41rem16px
p-51.25rem20px
p-61.5rem24px
p-71.75rem28px
p-82rem32px
p-92.25rem36px
p-102.5rem40px
p-112.75rem44px
p-123rem48px
p-143.5rem56px
p-164rem64px
p-205rem80px
p-246rem96px
p-287rem112px
p-328rem128px
p-369rem144px
p-4010rem160px
p-4411rem176px
p-4812rem192px
p-5213rem208px
p-5614rem224px
p-6015rem240px
p-6416rem256px
p-7218rem288px
p-8020rem320px
p-9624rem384px

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>
ClassSize (rem)Pixels
00rem0px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px
7218rem288px
8020rem320px
9624rem384px

Font weights

ClassCSS PropertyValue
font-thinfont-weight: 100;Thin
font-extralightfont-weight: 200;Extra Light
font-lightfont-weight: 300;Light
font-normalfont-weight: 400;Normal (Regular)
font-mediumfont-weight: 500;Medium
font-semiboldfont-weight: 600;Semi Bold
font-boldfont-weight: 700;Bold
font-extraboldfont-weight: 800;Extra Bold
font-blackfont-weight: 900;Black (Heaviest)
1
2

<h1 class="font-bold text-2xl">Bold Heading</h1>
<p class="font-light text-gray-600">This is light text.</p>
This post is licensed under CC BY 4.0 by the author.