Post

Tailwind Cheatsheet

Posted Updated
By Daniel Florido
5 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

end

1

justify-end

start

1

justify-start

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>

text alignment

1
2
3
4
5
6

text-left
text-center
text-right
text-justify
text-start   <!-- logical start (LTR/RTL aware) -->
text-end     <!-- logical end (LTR/RTL aware) -->

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
4

<div class="m-8">margin: 2rem all sides</div>
<div class="mx-auto">center horizontally</div>
<div class="my-10">margin top and bottom</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

border

1
2
3

border-2: 2px border
border-blue-500
rounded-md

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>

font sizes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

text-xs

text-sm
	
text-base
	
text-lg
	
text-xl
	

text-2xl
	

text-3xl
	

text-4xl
	

text-5xl
	

text-6xl
	

text-7xl
	

text-8xl
	

text-9xl
	
text-(length:<custom-property>)
	
font-size: var(<custom-property>);
text-[<value>]
	
font-size: <value>;

Psuedo elements

target last item

1
2
3
4
5

<ul>
  <li class="border-b last:border-b-0">Item 1</li>
  <li class="border-b last:border-b-0">Item 2</li>
  <li class="border-b last:border-b-0">Last Item (No border)</li>
</ul>

Cursor

1

cursor-pointer

Positioning

1
2

<div class="absolute bottom-0 left-0 ...">
  class="inset-[3px]

animation

see transition duration and ease for the hover state

1

<div class="group flex w-full gap-3 md:gap-6 items-center bg-white rounded-xl border border-plum-200 px-5 py-5 md:px-10 md:py-10 text-plum hover:bg-blue transition-color duration-300 ease-in-out" tabindex="-1">

Target parent

see group-hover

1

class="text-black group-hover:text-tangerine w-[48px] h-[48px] md:w-[64px] md:h-[64px] shrink-0 ml-auto"
This post is licensed under CC BY 4.0 by the author.