🎨 Tailwind CSS
Tailwind CSS Complete Cheatsheet
Typography to grid — complete Tailwind utility class reference with examples.
01
Installation & Setup
▼
BASHInstall Tailwind
# With Vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
theme: { extend: {} },
plugins: [],
};
# Add to CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
HTMLBasic usage
Title
💡
Tailwind is utility-first: compose classes instead of writing custom CSS. Use @apply in CSS files to extract repeated patterns.
02
Typography
▼
font-size
text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl
font-weight
font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold font-black
font-family
font-sans font-serif font-mono
text-align
text-left text-center text-right text-justify
line-height
leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose
letter-spacing
tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest
text-decoration
underline line-through no-underline
text-transform
uppercase lowercase capitalize normal-case
HTMLTypography examples
Heading
Body text
Label
03
Colors & Backgrounds
▼
Text colors
text-{color}-{shade}: text-blue-600 text-red-500 text-gray-900 text-white text-black
Background
bg-{color}-{shade}: bg-white bg-gray-100 bg-blue-500 bg-gradient-to-r from-blue-500 to-purple-600
Opacity
opacity-0 opacity-25 opacity-50 opacity-75 opacity-100 bg-blue-500/50
Gradient
from-{color} via-{color} to-{color} with bg-gradient-to-{direction}
Shades
50 100 200 300 400 500 600 700 800 900 950 (50=lightest, 900=darkest)
Common colors
slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose
HTMLColor examples
04
Spacing
▼
Padding
p-{n} pt- pr- pb- pl- px- py- where n: 0 0.5 1 2 3 4 5 6 7 8 10 12 16 20 24 32 40 48 56 64
Margin
m-{n} mt- mr- mb- ml- mx- my- (same scale). mx-auto = center horizontally
Space between
space-x-{n} space-y-{n} — gap between children (alternative to gap)
Negative margin
-mt-4 -ml-2 — useful for overlapping elements
Scale reference
0=0px, 1=4px, 2=8px, 4=16px, 6=24px, 8=32px, 12=48px, 16=64px, 24=96px
HTMLSpacing examples
-- children spaced 16px apart -->05 Layout & Flexbox ▼HTMLFlexbox utilitiesflex-direction: rowjustify-start | justify-center | justify-end justify-between | justify-around | justify-evenly items-start | items-center | items-end | items-stretch self-start | self-center | self-end flex-1 /* flex: 1 1 0% */ flex-auto /* flex: 1 1 auto */ flex-none /* flex: none */ grow-0 /* flex-grow: 0 */ shrink-0 /* flex-shrink: 0 */ gap-4 gap-x-8 gap-y-4HTMLCommon flex patterns06 Grid ▼HTMLGrid utilities/* spans 2 columns *//* spans all columns */💡Use 'grid-cols-[repeat(auto-fill,minmax(250px,1fr))]' for responsive grids without breakpoints.07 Sizing ▼Widthw-0 w-1 w-2... w-full w-screen w-auto w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 w-fit w-max w-minHeighth-{n} h-full h-screen h-svh h-auto h-fitMin/Maxmin-w-{n} max-w-{n} min-h-{n} max-h-{n} max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-7xlContainercontainer mx-auto px-4 — responsive fixed-width containerAspect ratioaspect-square aspect-video aspect-[4/3]Overflowoverflow-hidden overflow-auto overflow-scroll overflow-x-auto overflow-y-hiddenHTMLSizing examples![]()
08 Borders & Shadows ▼Borderborder border-{n} border-{color} border-{side} — border-0 border border-2 border-4Border radiusrounded-none rounded-sm rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-fullOutlineoutline outline-2 outline-offset-2 outline-blue-600 focus:outline-noneBox shadowshadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner shadow-noneShadow colorshadow-blue-500/50 — colored shadow with opacityRingring-2 ring-blue-500 ring-offset-2 — focus rings, like outlineHTMLBorder and shadow examples09 States & Responsive ▼HTMLStates and responsive design