Tailwind CSS
Cheatsheet v3
v2.1
# Spacing
0
px
0.5
1
1.5
2
2.5
3
3.5
4
5
6
7
8
9
10
11
12
14
16
20
24
28
32
36
40
44
48
52
56
60
64
72
80
96
# Colors
slate gray zinc neutral stone amber yellow lime green emerald teal cyan
50 50 50 50 50 50 50 50 50 50 50 50
100 100 100 100 100 100 100 100 100 100 100 100
200 200 200 200 200 200 200 200 200 200 200 200
300 300 300 300 300 300 300 300 300 300 300 300
400 400 400 400 400 400 400 400 400 400 400 400
500 500 500 500 500 500 500 500 500 500 500 500
600 600 600 600 600 600 600 600 600 600 600 600
700 700 700 700 700 700 700 700 700 700 700 700
800 800 800 800 800 800 800 800 800 800 800 800
900 900 900 900 900 900 900 900 900 900 900 900
# Breakpoints
<640px .flex
640px .sm:flex
768px .md:flex
1024px .lg:flex
1280px .xl:flex
1536px 2xl:flex
1536px .2xl:flex
# Pseudo Class
hover focus focus-within focus-visible active visited target first
last only odd even first-of-type last-of-type only-of-type empty
disabled enabled checked indeterminate default required valid
invalid in-range out-of-range placeholder-shown autofill read-only
before after first-letter first-line marker selection file backdrop
placeholder supports-[…] data-[…] rtl ltr open
# Pseudo Class - Aria
aria-checked aria-disabled aria-expanded aria-hidden aria-pressed
aria-readonly aria-required aria-selected aria-[…]
# Pseudo Class - Media
sm md lg xl 2xl min-[…] max-sm max-md max-lg max-xl max-2xl
max-[…] dark portrait landscape motion-safe motion-reduce
contrast-more contrast-less print
# Functions & Directives
@tailwind @apply @layer @config theme() screen()
# Opacity
0 5 10 20 25 30 40 50 60 70 75 80 90 95 100
# Colors
50 100 200 300 400 500 600 700 800 900
# Flex
�ex basis �ex
basis-[$spacing] flex-initial
basis-auto flex-1
basis-full flex-auto
basis-1/2 flex-none
basis-[1-2]/3
basis-[1-3]/4 �ex-grow
basis-[1-4]/5 grow
basis-[1-5]/6 grow-0
basis-[1-11]/12
�ex-shrink
direction shrink
flex-row shrink-0
flex-col
�ex-order
flex-row-reverse
order-first
flex-col-reverse
order-last
wrap order-none
flex-wrap order-[1-12]
flex-wrap-reverse
flex-nowrap
# Grid
grid-template-rows grid-auto-�ow
grid-rows-[1-6] grid-flow-row
grid-rows-none grid-flow-col
grid-flow-dense
grid-template-columns grid-flow-row-dense
grid-cols-[1-12] grid-flow-col-dense
grid-cols-none
grid-auto-columns
grid-column-[start|end] auto-cols-auto
col-auto auto-cols-min
col-span-[1-12] auto-cols-max
col-span-full auto-cols-fr
col-start-[1-13]
col-start-auto grid-auto-rows
col-end-[1-13] auto-rows-auto
col-end-auto auto-rows-min
auto-rows-max
grid-row-[start|end] auto-rows-fr
row-auto
row-span-[1-6]
row-span-full
row-start-[1-7]
row-start-auto
row-end-[1-7]
row-end-auto
# Flex/Grid
gap align-content place-content
gap-[$spacing] content-center place-content-center
gap-x-[$spacing] content-start place-content-start
gap-y-[$spacing] content-end place-content-end
content-between place-content-between
justify-content content-around place-content-around
justify-start content-evenly place-content-evenly
justify-center content-baseline place-content-stretch
justify-end place-content-baseline
justify-between align-items
justify-around items-start place-items
justify-evenly items-end place-items-auto
items-center place-items-start
justify-items items-baseline place-items-end
justify-items-start items-stretch place-items-center
justify-items-end place-items-stretch
justify-items-center align-self
justify-items-stretch self-auto place-self
self-start place-self-auto
justify-self self-end place-self-start
justify-self-auto self-center place-self-end
justify-self-start self-stretch place-self-center
justify-self-end self-baseline place-self-stretch
justify-self-center
justify-self-stretch
# Background
bg-attachment bg-image
bg-fixed bg-none
bg-local bg-gradient-to-[t|r|b|l]
bg-scroll bg-gradient-to-[tl|tr|bl|br]
bg-clip bg-repeat
bg-clip-border bg-repeat
bg-clip-padding bg-norepeat
bg-clip-content bg-repeat-[x|y]
bg-clip-text bg-repeat-round
bg-repeat-space
[bg-color|gradient-color-stops]
[bg|from]-transparent bg-size
[bg|from]-[inherit|current] bg-auto
[bg|from]-[white|black] bg-cover
[bg|from]-[$color]-[50-900] bg-contain
bg-position bg-origin
bg-center bg-origin-border
bg-[left|right|top|bottom] bg-origin-padding
bg-[left|right]-[top|bottom] bg-origin-content
# Border
[border|divide|outline|ring|ring-offset]-color border-width
[border|divide|ring|ring-offset]-transparent border
[border|divide|ring|ring-offset]-[inherit|current] border-[0|2|4|8]
[border|divide|ring|ring-offset]-white border-[x|y]
[border|divide|ring|ring-offset]-black border-[x|y]-[0|2|4|8]
[border|divide|ring|ring-offset]-[$color]-[50-900] border-[t|r|b|l]
border-[t|r|b|l]-[0|2|4|8]
[border|divide|outline]-style
[border|divide]-solid divide width
[border|divide|outline]-dotted divide-[x|y]
[border|divide|outline]-dashed divide-[x|y]-reverse
[border|divide|outline]-double divide-[x|y]-[0|2|4|8]
[border|divide|outline]-none
border-hidden ring-width
outline ring
ring-inset
border-radius ring-[0|1|2|4|8]
rounded
rounded-[sm|md|lg|xl|2xl|3xl] ring-offset-width
rounded-[full|none] ring-offset-[0|1|2|4|8]
rounded-[t|r|b|l]
outline-width
rounded-[t|r|b|l]-[full|none]
outline-[0|1|2|4|8]
rounded-[t|r|b|l]-[sm|md|lg|xl|2xl|3xl]
rounded-[tr|tl|br|bl] outline-offset-width
rounded-[tr|tl|br|bl]-[full|none] outline-offset-[0|1|2|4|8]
rounded-[tr|tl|br|bl]-[sm|md|lg|xl|2xl|3xl]
# Sizing
[ width|height ] max-width
[w|h]-[$spacing] max-w-0
[w|h]-[auto|full|screen|fit] max-w-none
[w|h]-[min|max] max-w-[xs|sm|md|lg|xl]
[w|h]-1/2 max-w-[2-7]xl
[w|h]-[1-2]/3 max-w-prose
[w|h]-[1-3]/4 max-w-screen-[xs|sm|md]
[w|h]-[1-4]/5 max-w-screen-[lg|xl|2xl]
[w|h]-[1-5]/6 max-w-[full|fit]
w-[1-11]/12 max-w-[min|max]
min-[ width|height ] max-height
min-h-screen max-h-[full|screen|fit]
min-[w|h]-0 max-h-[min|max]
min-[w|h]-[full|fit] max-h-[$spacing]
min-[w|h]-[min|max]
# Spacing
padding
p-[$spacing]
p[x|y]-[$spacing]
p[t|r|b|l]-[$spacing]
margin
m-auto
-m-[$spacing]
-m[x|y]-[$spacing]
-m[t|r|b|l]-[$spacing]
m-[$spacing]
m[x|y]-[$spacing]
m[t|r|b|l]-[$spacing]
space between
-space-[x|y]-[$spacing]
space-[x|y]-[$spacing]
space-[x|y]-reverse
# Typography
family style text-indent
font-sans italic indent-[$spacing]
font-serif not-italic
font-mono text-opacity
weight text-opacity-[$opacity]
size font-[thin|extralight|light]
text-[xs|sm|lg|xl] font-normal text-decoration
text-base font-medium underline
text-[2-9]xl font-[semibold|bold|extrabold] no-underline
font-black line-through
line-height overline
leading-[3-10] font-variant-numeric
leading-none ordinal text-decoration-color
leading-tight slashed-zero decoration-inherit
leading-snug [normal|lining|tabular]-nums decoration-transparent
leading-normal [oldstyle|proportional]-nums decoration-current
leading-relaxed [diagonal|stacked]-fractions decoration-[white/black]
leading-loose decoration-[$color]-[50-900]
letter-spacing
text-align tracking-[tight|tighter] text-decoration-style
text-[left|right] tracking-normal decoration-solid
text-center tracking-[wide|wider|widest] decoration-double
text-justify decoration-dashed
text-[start|end] [placeholder|text]-color decoration-dotted
[placeholder|text]-transparent decoration-wavy
text-transform [placeholder|text]-current
uppercase [placeholder|text]-[white|black] text-decoration-thickness
lowercase [placeholder|text]-[$color]-[50-900] decoration-auto
capitalize decoration-from-font
normal-case vertical-align decoration-[0|1|2|4|8]
align-baseline
text-over�ow align-[top|middle|bottom] text-underline-offset
truncate align-text-[top|bottom] underline-offset-auto
text-ellipsis align-[sub|super] underline-offset-[0|1|2|4|8]
text-clip
# Layout
container display break [before|after]
container [block|inline|inline-block] break-[before|after]-auto
[flex|inline-flex] break-[before|after]-all
columns [grid|inline-grid] break-[before|after]-[avoid
columns-[1-12] table break-[before|after]-page
columns-auto table-[caption|cell] break-[before|after]-[left|
coloumns-[3xs|2xs|xs] table-[row|column] break-[before|after]-column
coloumns-[sm|md|lg|xl] table-[row|column]-group
coloumns-[2-7]xl table-[header|footer]-group break inside
flow-root break-inside-auto
box sizing break-inside-[avoid|avoid-page
contents
box-border break-inside-avoid-column
hidden
box-content
positions-trbl over�ow
�oat overflow-auto
[top|right|bottom|left]-[$spacing]
float-[left|right] overflow-[hidden|visible]
[top|right|bottom|left]-[auto|full]
float-none overflow-scroll
inset-[$spacing]
inset-[auto|full] overflow-[x|y]-auto
clear
inset-1/2 overflow-[x|y]-[hidden|visible
clear-[left|right]
inset-[1-2]/3 overflow-[x|y]-scroll
clear-both
clear-none inset-[1-3]/4
overscroll-behavior
inset-[x|y]-[$spacing]
overscroll-auto
positions inset-[x|y]-[auto|full]
overscroll-contain
static inset-[x|y]-1/2
overscroll-none
relative inset-[x|y]-[1-2]/3
overscroll-[x|y]-auto
absolute inset-[x|y]-[1-3]/4
overscroll-[x|y]-contain
fixed
overscroll-[x|y]-none
sticky
visible
visible
invisible
collapse
# Interactivity
[accent|caret] color scroll behavior resize
accent-transparent scroll-auto resize
accent-[inherit|current] scroll-smooth resize-[x/y]
accent-white resize-none
accent-black scroll margin
accent-[$color]-[50-900] [-]scroll-m-[$spacing] touch action
[-]scroll-m[x|y]-[$spacing] touch-auto
appearance [-]scroll-m[t|r|b|l]-[$spacing] touch-none
appearance-none touch-pan-[x|y]
scroll padding touch-pan-[left|right
cursor [-]scroll-p-[$spacing] touch-pan-[up|down]
cursor-[none|auto|default|pointer] [-]scroll-p[x|y]-[$spacing] touch-pinch-zoom
cursor-[wait|text|move|help] [-]scroll-p[t|r|b|l]-[$spacing] touch-manipulation
cursor-[progress|cell|crosshair]
cursor-[alias|copy|no-drop] scroll snap align user select
cursor-[grab|grabbing] snap-start select-none
cursor-not-allowed snap-end select-text
cursor-context-menu snap-center select-all
cursor-vertical-text snap-align-none select-auto
cursor-all-scroll
scroll snap stop will change
cursor-[row|col]-resize
snap-normal will-change-auto
cursor-[n|e|s|w]-resize
snap-always will-change-scroll
cursor-[ne|nw|se|sw|ew|ns]-resize
cursor-[nesw|nwse]-resize will-change-contents
scroll snap type
cursor-zoom-[in|out] will-change-transform
snap-none
snap-[x|y]
pointer events
snap-both
pointer-events-auto
snap-mandatory
pointer-events-none
snap-proximity
# Transition & Animation
property timing function
transition-none ease-linear
transition-all ease-in
transition ease-out
transition-colors ease-in-out
transition-opacity
transition-shadow animation
transition-transform animate-none
animate-spin
[duration|delay] animate-ping
[duration|delay]-[75|100|150|200] animate-pulse
[duration|delay]-[300|500|700|1000] animate-bounce
# Transform
transform-origin translate
origin-[top|right|bottom|left] {-}translate-[x|y]-[$spacing]
origin-[top|bottom]-[right|left] {-}translate-[x|y]-1/2
origin-center {-}translate-[x|y]-[1|2]/3
{-}translate-[x|y]-[1|2|3]/4
scale {-}translate-[x|y]-[full|]
scale-[0|50|75|90|95|100]
scale-[105|110|125|150] skew
scale-[x|y]-[0|50|75|90|95|100] {-}skew-[x|y]-[0.1.2.3.6.12]
scale-[x|y]-[105|110|125|150]
rotate
rotate-[0.1.2.3.6.12.45.90.180]
-rotate-[1.2.3.6.12.45.90.180]
# Filters
brightness blur
brightness-[0|50|75|90|95|100|105|110|125|150|200] [blur|backdrop-blur]
backdrop-brightness-[0|50|75|90|95|100|105|110|125|150|200] [blur|backdrop-blur]-[sm|md|lg|
[blur|backdrop-blur]-none
contrast
contrast-[0|50|75|100|125|150|200] drop-shadow
backdrop-contrast-[0|50|75|100|125|150|200] drop-shadow
drop-shadow-[sm|md|lg|xl|2xl]
hue-rotate drop-shadow-none
hue-rotate-[0|15|30|60|90|180]
backdrop-hue-rotate-[0|15|30|60|90|180] [grayscale | invert | sepia]
[grayscale|invert|sepia]-0
backdrop-opacity [grayscale|invert|sepia]
backdrop-opacity-[$opacity] backdrop-[grayscale|invert|sepia
backdrop-[grayscale|invert|sepia
saturate
saturate-[0|50|100|150|200]
backdrop-saturate-[0|50|100|150|200]
# Effect
[mix|background]-blend-mode box-shadow
[mix|bg]-blend-normal shadow
[mix|bg]-blend-multiply shadow-[sm|md|lg|xl|2xl]
[mix|bg]-blend-screen shadow-inner
[mix|bg]-blend-overlay shadow-none
[mix|bg]-blend-{darken|lighten}
[mix|bg]-blend-color box-shadow-color
[mix|bg]-blend-color-{dodge|burn} shadow--transparent
[mix|bg]-blend-{soft|hard}-light shadow--{inherit|current}
[mix|bg]-blend-difference shadow--white
[mix|bg]-blend-exclusion shadow--black
[mix|bg]-blend-[hue|saturation] shadow--{$color}-{50-900}
[mix|bg]-blend-luminosity
opacity
[mix|bg]-blend-plus-lighter
opacity-[$opacity]
# Table
border-collapse
border-collapse
border-separate
border-spacing
border-spacing-[$spacing]
border-spacing-[x|y]-[$spacing]
table-layout
table-auto
table-fixed
# Svg
[�ll|stroke]
[fill|stroke]-none
[fill|stroke]-transparent
[fill|stroke]-[inherit|current]
[fill|stroke]-[white|black]
[fill|stroke]-[$color]-[50-900]
stroke-width
stroke-[0|1|2]
# Accessibility
screen-reader
sr-only
not-sr-only
MADE WITH
Umesh Kadam
