Tailwind Cheat Sheet

Other Tools

Tailwind Cheat Sheet

Other Tools

Quick reference for Tailwind classes

Class

CSS

sm:e.g. sm:flex

@media (min-width: 640px)

md:e.g. md:grid-cols-2

@media (min-width: 768px)

lg:e.g. lg:px-8

@media (min-width: 1024px)

xl:e.g. xl:max-w-6xl

@media (min-width: 1280px)

2xl:e.g. 2xl:text-lg

@media (min-width: 1536px)

Class

CSS

block

display: block

inline-block

display: inline-block

inline

display: inline

flex

display: flex

inline-flex

display: inline-flex

grid

display: grid

inline-grid

display: inline-grid

hidden

display: none

contents

display: contents

Class

CSS

static

position: static

fixed

position: fixed

absolute

position: absolute

relative

position: relative

sticky

position: sticky

inset-0

inset: 0

inset-x-0

left: 0; right: 0

inset-y-0

top: 0; bottom: 0

top-0

top: 0

right-0

right: 0

bottom-0

bottom: 0

left-0

left: 0

Class

CSS

flex-row

flex-direction: row

flex-col

flex-direction: column

flex-wrap

flex-wrap: wrap

flex-nowrap

flex-wrap: nowrap

flex-1

flex: 1 1 0%

flex-auto

flex: 1 1 auto

flex-none

flex: none

grow

flex-grow: 1

grow-0

flex-grow: 0

shrink

flex-shrink: 1

shrink-0

flex-shrink: 0

Class

CSS

grid-cols-1

grid-template-columns: repeat(1, minmax(0, 1fr))

grid-cols-2

grid-template-columns: repeat(2, minmax(0, 1fr))

grid-cols-3

grid-template-columns: repeat(3, minmax(0, 1fr))

grid-cols-4

grid-template-columns: repeat(4, minmax(0, 1fr))

grid-cols-12

grid-template-columns: repeat(12, minmax(0, 1fr))

col-span-1

grid-column: span 1 / span 1

col-span-2

grid-column: span 2 / span 2

col-span-full

grid-column: 1 / -1

grid-rows-1

grid-template-rows: repeat(1, minmax(0, 1fr))

grid-rows-2

grid-template-rows: repeat(2, minmax(0, 1fr))

Class

CSS

justify-start

justify-content: flex-start

justify-center

justify-content: center

justify-end

justify-content: flex-end

justify-between

justify-content: space-between

justify-around

justify-content: space-around

justify-evenly

justify-content: space-evenly

items-start

align-items: flex-start

items-center

align-items: center

items-end

align-items: flex-end

items-baseline

align-items: baseline

items-stretch

align-items: stretch

self-auto

align-self: auto

self-start

align-self: flex-start

self-center

align-self: center

self-end

align-self: flex-end

Class

CSS

p-0

padding: 0

p-1

padding: 0.25rem (4px)

p-2

padding: 0.5rem (8px)

p-4

padding: 1rem (16px)

p-6

padding: 1.5rem (24px)

p-8

padding: 2rem (32px)

px-*

padding-left & padding-right

py-*

padding-top & padding-bottom

pt/pr/pb/pl-*

padding-[side]

m-0

margin: 0

m-1

margin: 0.25rem (4px)

m-2

margin: 0.5rem (8px)

m-4

margin: 1rem (16px)

m-auto

margin: auto

-m-1

margin: -0.25rem

mx-auto

margin-left: auto; margin-right: auto

gap-0

gap: 0

gap-1

gap: 0.25rem (4px)

gap-2

gap: 0.5rem (8px)

gap-4

gap: 1rem (16px)

gap-x-*

column-gap

gap-y-*

row-gap

Class

CSS

w-0

width: 0

w-1

width: 0.25rem (4px)

w-4

width: 1rem (16px)

w-full

width: 100%

w-screen

width: 100vw

w-auto

width: auto

w-1/2

width: 50%

w-1/3

width: 33.333%

w-fit

width: fit-content

min-w-0

min-width: 0

min-w-full

min-width: 100%

max-w-sm

max-width: 24rem (384px)

max-w-md

max-width: 28rem (448px)

max-w-lg

max-width: 32rem (512px)

max-w-xl

max-width: 36rem (576px)

max-w-2xl

max-width: 42rem (672px)

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

h-0

height: 0

h-4

height: 1rem (16px)

h-full

height: 100%

h-screen

height: 100vh

h-auto

height: auto

min-h-0

min-height: 0

min-h-full

min-height: 100%

min-h-screen

min-height: 100vh

size-4

width: 1rem; height: 1rem

size-6

width: 1.5rem; height: 1.5rem

size-full

width: 100%; height: 100%

Class

CSS

text-xs

font-size: 0.75rem (12px)

text-sm

font-size: 0.875rem (14px)

text-base

font-size: 1rem (16px)

text-lg

font-size: 1.125rem (18px)

text-xl

font-size: 1.25rem (20px)

text-2xl

font-size: 1.5rem (24px)

text-3xl

font-size: 1.875rem (30px)

text-4xl

font-size: 2.25rem (36px)

font-thin

font-weight: 100

font-light

font-weight: 300

font-normal

font-weight: 400

font-medium

font-weight: 500

font-semibold

font-weight: 600

font-bold

font-weight: 700

font-sans

font-family: ui-sans-serif, system-ui, sans-serif

font-serif

font-family: ui-serif, Georgia, serif

font-mono

font-family: ui-monospace, monospace

italic

font-style: italic

not-italic

font-style: normal

leading-none

line-height: 1

leading-tight

line-height: 1.25

leading-normal

line-height: 1.5

leading-relaxed

line-height: 1.625

leading-loose

line-height: 2

tracking-tight

letter-spacing: -0.025em

tracking-normal

letter-spacing: 0

tracking-wide

letter-spacing: 0.025em

Class

CSS

text-left

text-align: left

text-center

text-align: center

text-right

text-align: right

text-justify

text-align: justify

uppercase

text-transform: uppercase

lowercase

text-transform: lowercase

capitalize

text-transform: capitalize

normal-case

text-transform: none

underline

text-decoration: underline

line-through

text-decoration: line-through

no-underline

text-decoration: none

truncate

overflow: hidden; text-overflow: ellipsis; white-space: nowrap

text-ellipsis

text-overflow: ellipsis

text-clip

text-overflow: clip

whitespace-normal

white-space: normal

whitespace-nowrap

white-space: nowrap

whitespace-pre

white-space: pre

break-normal

word-break: normal

break-words

word-break: break-word

break-all

word-break: break-all

line-clamp-1

-webkit-line-clamp: 1

line-clamp-2

-webkit-line-clamp: 2

line-clamp-3

-webkit-line-clamp: 3

Class

CSS

bg-transparent

background-color: transparent

bg-current

background-color: currentColor

bg-white

background-color: #fff

bg-black

background-color: #000

bg-slate-500

background-color: #64748b

bg-[#hex]e.g. bg-[#1da1f2]

background-color: #hex

bg-cover

background-size: cover

bg-contain

background-size: contain

bg-center

background-position: center

bg-no-repeat

background-repeat: no-repeat

bg-repeat

background-repeat: repeat

bg-fixed

background-attachment: fixed

bg-gradient-to-r

background-image: linear-gradient(to right, ...)

bg-gradient-to-b

background-image: linear-gradient(to bottom, ...)

from-blue-500

gradient start color

via-purple-500

gradient middle color

to-pink-500

gradient end color

Class

CSS

border

border-width: 1px

border-0

border-width: 0

border-2

border-width: 2px

border-4

border-width: 4px

border-t

border-top-width: 1px

border-r

border-right-width: 1px

border-b

border-bottom-width: 1px

border-l

border-left-width: 1px

border-solid

border-style: solid

border-dashed

border-style: dashed

border-dotted

border-style: dotted

border-none

border-style: none

rounded

border-radius: 0.25rem (4px)

rounded-md

border-radius: 0.375rem (6px)

rounded-lg

border-radius: 0.5rem (8px)

rounded-xl

border-radius: 0.75rem (12px)

rounded-2xl

border-radius: 1rem (16px)

rounded-full

border-radius: 9999px

rounded-none

border-radius: 0

rounded-t-lg

border-top-left/right-radius: 0.5rem

divide-x

border between horizontal children

divide-y

border between vertical children

Class

CSS

shadow-sm

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)

shadow

box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)

shadow-md

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)

shadow-lg

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)

shadow-xl

box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)

shadow-2xl

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)

shadow-inner

box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

shadow-none

box-shadow: none

opacity-0

opacity: 0

opacity-50

opacity: 0.5

opacity-100

opacity: 1

blur

filter: blur(8px)

blur-sm

filter: blur(4px)

blur-lg

filter: blur(16px)

blur-none

filter: blur(0)

backdrop-blur

backdrop-filter: blur(8px)

backdrop-blur-sm

backdrop-filter: blur(4px)

Class

CSS

transition

transition: all 150ms ease

transition-none

transition: none

transition-colors

transition: color, background-color, border-color

transition-opacity

transition: opacity 150ms

transition-transform

transition: transform 150ms

duration-75

transition-duration: 75ms

duration-150

transition-duration: 150ms

duration-300

transition-duration: 300ms

duration-500

transition-duration: 500ms

ease-linear

transition-timing-function: linear

ease-in

transition-timing-function: ease-in

ease-out

transition-timing-function: ease-out

ease-in-out

transition-timing-function: ease-in-out

delay-150

transition-delay: 150ms

delay-300

transition-delay: 300ms

animate-spin

animation: spin 1s linear infinite

animate-ping

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite

animate-pulse

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite

animate-bounce

animation: bounce 1s infinite

Class

CSS

scale-0

transform: scale(0)

scale-50

transform: scale(0.5)

scale-100

transform: scale(1)

scale-150

transform: scale(1.5)

rotate-0

transform: rotate(0deg)

rotate-45

transform: rotate(45deg)

rotate-90

transform: rotate(90deg)

rotate-180

transform: rotate(180deg)

-rotate-45

transform: rotate(-45deg)

translate-x-0

transform: translateX(0)

translate-x-4

transform: translateX(1rem)

translate-x-full

transform: translateX(100%)

-translate-x-4

transform: translateX(-1rem)

translate-y-4

transform: translateY(1rem)

skew-x-3

transform: skewX(3deg)

skew-y-3

transform: skewY(3deg)

origin-center

transform-origin: center

origin-top

transform-origin: top

Class

CSS

cursor-pointer

cursor: pointer

cursor-default

cursor: default

cursor-not-allowed

cursor: not-allowed

cursor-wait

cursor: wait

cursor-grab

cursor: grab

pointer-events-none

pointer-events: none

pointer-events-auto

pointer-events: auto

select-none

user-select: none

select-text

user-select: text

select-all

user-select: all

resize

resize: both

resize-none

resize: none

resize-x

resize: horizontal

resize-y

resize: vertical

scroll-smooth

scroll-behavior: smooth

scroll-auto

scroll-behavior: auto

Class

CSS

hover:e.g. hover:bg-blue-600

on mouse hover

focus:e.g. focus:ring-2

on focus

focus-visible:e.g. focus-visible:outline-none

on keyboard focus

active:e.g. active:bg-blue-700

on active/pressed

disabled:e.g. disabled:opacity-50

when disabled

first:e.g. first:mt-0

first child

last:e.g. last:mb-0

last child

odd:e.g. odd:bg-gray-100

odd children

even:e.g. even:bg-white

even children

group-hover:e.g. group-hover:visible

when parent .group is hovered

peer-focus:e.g. peer-focus:ring

when sibling .peer is focused

dark:e.g. dark:bg-gray-900

dark mode

motion-safe:e.g. motion-safe:animate-spin

if user allows motion

motion-reduce:e.g. motion-reduce:animate-none

if user prefers reduced motion

Class

CSS

overflow-auto

overflow: auto

overflow-hidden

overflow: hidden

overflow-visible

overflow: visible

overflow-scroll

overflow: scroll

overflow-x-auto

overflow-x: auto

overflow-y-auto

overflow-y: auto

overflow-x-hidden

overflow-x: hidden

overflow-y-hidden

overflow-y: hidden

z-0

z-index: 0

z-10

z-index: 10

z-20

z-index: 20

z-30

z-index: 30

z-40

z-index: 40

z-50

z-index: 50

z-auto

z-index: auto

-z-10

z-index: -10

Tip: Use arbitrary values with square brackets: w-[200px], text-[#1da1f2], grid-cols-[1fr_2fr]

Have a sticker! Peel it off to download.