Skip to content
Bai
EspañolEnglishEuskara Get started →

Tools

Tailwind CSS cheat sheet

A quick reference to Tailwind CSS classes and the CSS they produce.

Private by design
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 colour
via-purple-500
gradient middle colour
to-pink-500
gradient end colour
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
when 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 the user allows motion
motion-reduce:e.g. motion-reduce:animate-none
if the 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]

About this tool

Even if you use Tailwind every day, it is easy to forget whether you wanted justify-between or items-center, how big p-6 is, or what truncate actually does. This cheat sheet collects the most common classes alongside the CSS they generate, grouped into sections: breakpoints, display, position, flexbox, grid, alignment, spacing, sizing, typography, backgrounds, borders, effects, transitions, transforms, interactivity and states.

Type in the search box and the list filters instantly by class name, CSS property or example, so you can look up “gap”, “flex-direction” or “hover”. The section bar lets you show just one section, and you can collapse or expand each block by clicking its heading. The button on each row copies the class to your clipboard, ready to paste into your HTML or JSX.

It is a static reference that runs in your browser with no calls to outside services. It covers a selection of the most frequently used classes rather than the full documentation, and the values reflect Tailwind’s default configuration; if your project customises the theme (colours, spacing, breakpoints), your actual values may differ. For one-off cases, use arbitrary values in square brackets.

Frequently asked questions

How big is each spacing unit in Tailwind?

By default each unit is 0.25rem, which is 4px with a 16px base font size. So p-4 is 1rem (16px) and gap-2 is 0.5rem (8px).

How do I use a value that isn’t on the scale?

Use arbitrary values in square brackets, for example w-[200px], text-[#1da1f2] or grid-cols-[1fr_2fr]. Spaces inside the value are written as underscores.

What do sm:, md: and lg: mean?

They are breakpoint prefixes that apply a class from a minimum width upwards: 640, 768 and 1024px by default. Tailwind is mobile-first, so unprefixed classes apply at every size.

Does it cover both Tailwind 3 and Tailwind 4?

Most classes here exist in both versions. A few were renamed or changed value in v4, such as gradients and some shadows, so check the docs for your version if in doubt.

Related tools

HEX to RGBConvert a hexadecimal colour code to RGB (and other formats) instantly.RGB to HEXConvert RGB values to a hex code for CSS, design work or brand guides.HSL converterConvert colours from HSL to HEX or RGB and back, with a live preview.Encoder and decoderEncode and decode Base64, URLs and HTML entities, and generate MD5 and SHA hashes.SHA hash generatorCompute the SHA-1, SHA-256, SHA-512 or MD5 hash of any text in your browser.Regex testerTest your regular expressions live and see what matches and which groups are captured.