:::note[TL;DR]
- Tailwind utility classes go directly in HTML — no separate CSS files needed for most UI work
- Responsive design uses breakpoint prefixes:
sm:,md:,lg:,xl:,2xl:(mobile-first) - State modifiers like
hover:,focus:,dark:,group-hover:handle all interactive styles - Arbitrary values (
w-[320px],bg-[#1a1a1a]) let you escape the design system for one-offs — use sparingly - Spacing scale (
p-4= 1rem = 16px), flex, and grid utilities cover 80% of layouts :::
Display & visibility
block inline-block inline hidden
flex inline-flex
grid inline-grid
contents flow-root
table table-row table-cell
visible invisible collapseFlexbox
flex-row flex-col
flex-row-reverse flex-col-reverse
flex-wrap flex-nowrap flex-wrap-reverse
justify-start justify-end justify-center
justify-between justify-around justify-evenly
items-start items-end items-center
items-baseline items-stretch
self-auto self-start self-end
self-center self-stretch self-baseline
flex-1 flex-auto flex-none
flex-grow flex-shrink
gap-4 gap-x-4 gap-y-4
order-first order-last order-noneGrid
grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4
grid-cols-6 grid-cols-12 grid-cols-none
grid-rows-1 grid-rows-2 grid-rows-3
col-span-1 col-span-2 col-span-full
row-span-1 row-span-2 row-span-full
col-start-1 col-end-3
row-start-2 row-end-4
auto-cols-auto auto-cols-min auto-cols-fr
auto-rows-auto auto-rows-min auto-rows-fr
grid-flow-row grid-flow-col grid-flow-denseSpacing
Scale: 0 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
p-4 px-4 py-4 pt-4 pr-4 pb-4 pl-4
m-4 mx-4 my-4 mt-4 mr-4 mb-4 ml-4
mx-auto -m-4 space-x-4 space-y-4
# Size
w-4 w-1/2 w-full w-screen w-min w-max w-fit
h-4 h-1/2 h-full h-screen h-min h-max h-fit
min-w-0 min-w-full max-w-xs max-w-sm max-w-lg max-w-xl max-w-2xl max-w-screen-xlTypography
# Font family
font-sans font-serif font-mono
# Size
text-xs text-sm text-base text-lg text-xl
text-2xl text-3xl text-4xl text-5xl text-6xl
# Weight
font-thin font-light font-normal font-medium
font-semibold font-bold font-extrabold font-black
# Style & decoration
italic not-italic
underline line-through no-underline
uppercase lowercase capitalize normal-case
tracking-tight tracking-normal tracking-wide tracking-widest
leading-none leading-tight leading-normal leading-relaxed leading-loose
# Alignment
text-left text-center text-right text-justify
# Overflow
truncate text-ellipsis text-clip
overflow-ellipsis whitespace-nowrap break-words break-allColors
Palette: slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose
Shades: 50 100 200 300 400 500 600 700 800 900 950
text-slate-500 text-blue-600 text-red-400
bg-slate-100 bg-emerald-500 bg-white bg-transparent
border-gray-300 border-blue-500
ring-2 ring-blue-500
placeholder-gray-400
# Opacity modifier (Tailwind v3+)
bg-blue-500/50 # 50% opacity
text-black/75Borders
border border-2 border-4 border-8 border-0
border-t border-r border-b border-l
border-t-2 border-x-4 border-y-2
border-solid border-dashed border-dotted border-none
rounded rounded-sm rounded-md rounded-lg
rounded-xl rounded-2xl rounded-full rounded-none
rounded-t-lg rounded-tl-xl
divide-x divide-y divide-x-2 divide-gray-200Shadows & rings
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl
shadow-inner shadow-none
ring-0 ring-1 ring-2 ring-4 ring-8 ring-inset
ring-blue-500 ring-offset-2 ring-offset-whiteBackgrounds
bg-fixed bg-local bg-scroll
bg-clip-border bg-clip-padding bg-clip-content bg-clip-text
bg-center bg-top bg-bottom bg-left bg-right
bg-no-repeat bg-repeat bg-repeat-x bg-repeat-y
bg-auto bg-cover bg-contain
# Gradient
bg-gradient-to-r from-blue-500 to-purple-600
bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500Positioning
static relative absolute fixed sticky
top-0 right-0 bottom-0 left-0
top-4 right-4 inset-0 inset-x-0 inset-y-0
z-0 z-10 z-20 z-30 z-40 z-50 z-auto -z-10Overflow & scroll
overflow-auto overflow-hidden overflow-visible overflow-scroll
overflow-x-auto overflow-y-auto overflow-x-hidden overflow-y-scroll
overscroll-auto overscroll-none overscroll-contain
scroll-smooth scroll-auto
scroll-m-4 scroll-p-4
snap-x snap-y snap-mandatory snap-proximity
snap-start snap-center snap-endEffects & transforms
opacity-0 opacity-25 opacity-50 opacity-75 opacity-100
# Transform
scale-50 scale-75 scale-100 scale-125 scale-150
-scale-x-100 scale-y-50
rotate-0 rotate-45 rotate-90 rotate-180 -rotate-45
translate-x-4 translate-y-4 -translate-x-2
skew-x-6 skew-y-3
# Origin
origin-center origin-top origin-bottom-right
# Transition
transition transition-colors transition-opacity
transition-shadow transition-transform transition-all
duration-75 duration-100 duration-150 duration-200 duration-300
ease-linear ease-in ease-out ease-in-out
delay-75 delay-100 delay-150 delay-300Responsive prefixes
sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px
# Example
<div class="w-full md:w-1/2 lg:w-1/3">State modifiers
hover:bg-blue-600
focus:ring-2 focus:ring-blue-500
active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed
checked:bg-blue-500
group-hover:text-white (parent has class "group")
peer-checked:block (sibling has class "peer"):::note
group-hover: requires the parent element to have the class group. Add group to the wrapper, then use group-hover: on any descendant. Same pattern applies to group-focus:, group-active:, etc.
:::
focus-within:border-blue-500
focus-visible:outline-none
placeholder:text-gray-400
first:pt-0 last:pb-0 odd:bg-gray-50 even:bg-white
empty:hiddenDark mode
dark:bg-gray-900 dark:text-white dark:border-gray-700
# tailwind.config — class strategy (toggle with JS):
darkMode: 'class'
# Then add "dark" class to <html>:::warning
In Tailwind v4, dark mode configuration moved to CSS. Instead of darkMode: 'class' in tailwind.config.js, use @variant dark (&:where(.dark, .dark *)) in your CSS file. Check the v4 migration guide if upgrading from v3.
:::
Arbitrary values
w-[320px] # exact pixel width
text-[14px] # exact font size
bg-[#1a1a1a] # custom hex color
top-[117px]
grid-cols-[1fr_2fr_1fr]:::tip
Use arbitrary values for genuine one-offs, not as a workaround for missing theme values. If you’re using bg-[#1a1a1a] in five places, add it to your theme in tailwind.config.js (v3) or @theme (v4) instead — that way it’s a named token, not a magic number repeated everywhere.
:::
Useful component patterns
<!-- Centered container -->
<div class="max-w-4xl mx-auto px-4">
<!-- Card -->
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
<!-- Button -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:scale-95 transition font-medium">
<!-- Input -->
<input class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<!-- Badge -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
<!-- Flex row with gap -->
<div class="flex items-center gap-4">
<!-- Grid 3 cols responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">Summary
- Tailwind uses utility classes directly in HTML — no separate CSS files needed for most UI work
- Responsive design uses prefix breakpoints:
sm:,md:,lg:,xl:,2xl: - State modifiers like
hover:,focus:,dark:,group-hover:handle interactive and conditional styles - Arbitrary values (
w-[320px],bg-[#1a1a1a]) let you break out of the design system for one-offs - Memorize the spacing scale, flex utilities, and grid classes — they cover 80% of layouts
Frequently Asked Questions
Does Tailwind work with React, Vue, and Astro?
Yes. Tailwind is framework-agnostic — it scans your HTML/JSX/Vue templates for class names and generates only the CSS you use. Install @tailwindcss/vite or @tailwindcss/postcss and configure it for your bundler.
What’s the difference between Tailwind v3 and v4?
Tailwind v4 (2025) moved configuration from tailwind.config.js to a CSS-first setup using @import "tailwindcss" and @theme. The utility classes are largely the same. The main change is how you configure custom colors, fonts, and breakpoints — in CSS instead of JavaScript.
Should I use @apply to create component classes?
Sparingly. @apply is tempting but defeats the purpose of utility-first CSS. For reusable components, use your framework’s component system (React component, Vue component, Astro component) and keep Tailwind utilities in the template. Reserve @apply for cases where you genuinely can’t use a component.
What to Read Next
- Core Web Vitals Guide — after styling, performance is the next thing to tackle
- Docker Cheat Sheet — if you’re shipping a Tailwind app, you’ll likely containerize it
