Tailwind CSS Cheatsheet

Quick reference for Tailwind v3 utility classes — layout, spacing, typography, flexbox, grid, and responsive modifiers.

Responsive Breakpoints

Class	CSS
sm:	@media (min-width: 640px)
md:	@media (min-width: 768px)
lg:	@media (min-width: 1024px)
xl:	@media (min-width: 1280px)
2xl:	@media (min-width: 1536px)

<!-- Hidden on mobile, block on md+ -->
<div class="hidden md:block">...</div>

<!-- Different padding per breakpoint -->
<div class="p-4 md:p-8 lg:p-12">...</div>

Display

Class	CSS
block	display: block
inline-block	display: inline-block
inline	display: inline
flex	display: flex
inline-flex	display: inline-flex
grid	display: grid
hidden	display: none

Flexbox

flex           → display: flex
flex-col       → flex-direction: column
flex-row       → flex-direction: row
flex-wrap      → flex-wrap: wrap
flex-nowrap    → flex-wrap: nowrap

items-start    → align-items: flex-start
items-center   → align-items: center
items-end      → align-items: flex-end
items-stretch  → align-items: stretch

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

gap-4    → gap: 1rem
gap-x-4  → column-gap: 1rem
gap-y-4  → row-gap: 1rem

flex-1      → flex: 1 1 0%
flex-auto   → flex: 1 1 auto
flex-none   → flex: none
grow        → flex-grow: 1
shrink-0    → flex-shrink: 0

Grid

grid                  → display: grid
grid-cols-3           → grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-[200px_1fr] → arbitrary value
col-span-2            → grid-column: span 2 / span 2
col-span-full         → grid-column: 1 / -1

grid-rows-3           → grid-template-rows: repeat(3, minmax(0, 1fr))
row-span-2            → grid-row: span 2 / span 2

Spacing (Margin & Padding)

Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem,
       5=1.25rem, 6=1.5rem, 8=2rem, 10=2.5rem, 12=3rem,
       16=4rem, 20=5rem, 24=6rem, 32=8rem, 40=10rem, 48=12rem

p-4     → padding: 1rem (all sides)
px-4    → padding-left + padding-right: 1rem
py-4    → padding-top + padding-bottom: 1rem
pt-4    → padding-top: 1rem
pl-4    → padding-left: 1rem

m-4     → margin: 1rem
mx-auto → margin-left: auto; margin-right: auto
mx-4    → margin-left + margin-right: 1rem
-m-4    → margin: -1rem (negative margin)

Typography

text-xs     → font-size: 0.75rem
text-sm     → font-size: 0.875rem
text-base   → font-size: 1rem
text-lg     → font-size: 1.125rem
text-xl     → font-size: 1.25rem
text-2xl    → font-size: 1.5rem
text-3xl    → font-size: 1.875rem
text-4xl    → font-size: 2.25rem

font-thin       → font-weight: 100
font-normal     → font-weight: 400
font-medium     → font-weight: 500
font-semibold   → font-weight: 600
font-bold       → font-weight: 700
font-extrabold  → font-weight: 800

text-left    → text-align: left
text-center  → text-align: center
text-right   → text-align: right

leading-none    → line-height: 1
leading-tight   → line-height: 1.25
leading-normal  → line-height: 1.5
leading-loose   → line-height: 2

tracking-tight  → letter-spacing: -0.05em
tracking-normal → letter-spacing: 0
tracking-wide   → letter-spacing: 0.025em

Colors

text-gray-500   → color: #6b7280
text-blue-600  → color: #2563eb
text-red-500   → color: #ef4444

bg-white       → background-color: #fff
bg-gray-100    → background-color: #f3f4f6
bg-blue-500    → background-color: #3b82f6

border-gray-200  → border-color: #e5e7eb
ring-blue-500    → --tw-ring-color: #3b82f6

// Opacity modifier (Tailwind v3)
text-blue-600/50   → color: rgb(37 99 235 / 0.5)
bg-black/10        → background: rgb(0 0 0 / 0.1)

Borders & Rounded

border       → border-width: 1px
border-2     → border-width: 2px
border-t     → border-top-width: 1px

rounded      → border-radius: 0.25rem
rounded-md   → border-radius: 0.375rem
rounded-lg   → border-radius: 0.5rem
rounded-xl   → border-radius: 0.75rem
rounded-2xl  → border-radius: 1rem
rounded-full → border-radius: 9999px

Sizing

w-full  → width: 100%
w-screen → width: 100vw
w-1/2   → width: 50%
w-1/3   → width: 33.333%
w-64    → width: 16rem
w-auto  → width: auto
w-[200px] → width: 200px (arbitrary)

max-w-sm  → max-width: 24rem
max-w-md  → max-width: 28rem
max-w-lg  → max-width: 32rem
max-w-xl  → max-width: 36rem
max-w-2xl → max-width: 42rem
max-w-screen-lg → max-width: 1024px

h-full    → height: 100%
h-screen  → height: 100vh
min-h-screen → min-height: 100vh

State Variants

hover:bg-blue-700
focus:outline-none
focus:ring-2 focus:ring-blue-500
active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed
group-hover:text-blue-600  // parent has 'group' class
peer-checked:bg-blue-500   // sibling has 'peer' class
dark:bg-gray-800           // dark mode

Frequently Asked Questions

What version of Tailwind does this cheatsheet cover?

This cheatsheet covers Tailwind CSS v3, which introduced the JIT engine, arbitrary values like w-[317px], and the opacity modifier syntax (text-blue-600/50). Most classes are also available in v2 with minor differences.

How do I add custom colors to Tailwind CSS?

Extend the theme in tailwind.config.js under theme.extend.colors. Custom colors become available as bg-{name}-{shade}, text-{name}-{shade}, and border-{name}-{shade} across all utilities.

What does the JIT engine do in Tailwind v3?

The Just-in-Time engine generates CSS on demand as you write classes, instead of generating all possible utilities upfront. This makes dev builds instant and enables arbitrary values like w-[317px] and bg-[#custom].

How does dark mode work in Tailwind CSS?

Add the dark: prefix to any utility class. Configure darkMode: 'class' in tailwind.config.js to toggle dark mode with a class on the html element, or darkMode: 'media' to follow the system OS preference automatically.

Can I use Tailwind with CSS Modules or plain CSS?

Yes. Tailwind utility classes work alongside CSS Modules, plain CSS, and CSS-in-JS. Use @apply in a CSS file to compose utilities into reusable class names, or mix Tailwind classes with custom styles as needed.

From the blog

View all →

Need to convert CSS to Tailwind classes?

Use the CSS to Tailwind Converter →