Tailwind CSS Cheat Sheet
Tailwind CSS utility class reference for layout, spacing, typography, colors, and responsive design. Searchable and copy-ready.
Layout
| Syntax | Description |
|---|---|
| Responsive fixed-width container | |
| Display property | |
| Hide element | |
| Flexbox container | |
| Grid container | |
| Position property | |
| Position offset | |
| All sides 0 (full overlay) | |
| Z-index layers | |
| Overflow behavior |
Flexbox
| Syntax | Description |
|---|---|
| Flex direction | |
| Flex wrapping | |
| Align items on cross axis | |
| Justify content on main axis | |
| Gap between flex/grid children | |
| Flex grow/shrink behavior | |
| Allow/prevent flex growing | |
| Allow/prevent flex shrinking | |
| Align individual flex item |
Grid
| Syntax | Description |
|---|---|
| Grid column count | |
| Grid row count | |
| Column span | |
| Row span | |
| Grid column start/end | |
| Center items in grid cells |
Spacing
| Syntax | Description |
|---|---|
| Padding (all sides) | |
| Horizontal/vertical padding | |
| Individual side padding | |
| Margin (all sides) | |
| Center horizontally with margin | |
| Negative margin | |
| Space between children |
Sizing
| Syntax | Description |
|---|---|
| Width | |
| Fixed width | |
| Height | |
| Minimum height full viewport | |
| Maximum width | |
| Minimum width | |
| Aspect ratio | |
| Width AND height shorthand |
Typography
| Syntax | Description |
|---|---|
| Font size | |
| Font weight | |
| Font family | |
| Text alignment | |
| Line height | |
| Letter spacing | |
| Text transform | |
| Truncate with ellipsis | |
| Clamp text to N lines | |
| Whitespace handling | |
| Font style | |
| Text decoration |
Colors
| Syntax | Description |
|---|---|
| Text color (semantic token) | |
| Background color (semantic) | |
| Gradient direction | |
| Gradient color stops | |
| Element opacity | |
| Background image sizing/position |
Borders
| Syntax | Description |
|---|---|
| Border width | |
| Individual side border | |
| Border radius | |
| Individual corner radius | |
| Border color (semantic) | |
| Borders between children | |
| Focus ring / outline |
Effects
| Syntax | Description |
|---|---|
| Box shadow | |
| Remove shadow | |
| Blur filter | |
| Background blur (glassmorphism) | |
| CSS transition | |
| Transition duration | |
| Transition timing function | |
| CSS animations | |
| Transform scale | |
| Transform rotate | |
| Transform translate | |
| Cursor style | |
| Text selection behavior | |
| Disable pointer events |
Responsive
| Syntax | Description |
|---|---|
| Responsive breakpoint prefixes | |
| Responsive grid columns | |
| Show/hide at breakpoint | |
| Dark mode prefix | |
| State variant prefixes | |
| Style child when parent hovered | |
| Style sibling when peer focused | |
| Child position variants | |
| Disabled state variant | |
| Print media query |
Frequently asked questions
What is Tailwind CSS and why use it?
Tailwind is a utility-first CSS framework where you style elements using small, single-purpose classes directly in HTML. Benefits: no naming conventions, no CSS file switching, consistent design system, easy responsive design, and smaller production bundles (unused styles are purged).
How do responsive breakpoints work?
Tailwind uses mobile-first breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Classes without a prefix apply to all sizes. Prefixed classes apply from that breakpoint up: md:grid-cols-2 means 2 columns from 768px and wider.
How do I handle dark mode?
Add the dark: prefix to any utility: bg-white dark:bg-gray-900. Configure darkMode in tailwind.config.js - 'class' mode toggles via a CSS class, 'media' follows system preference. Most UI libraries use 'class' mode for manual toggle.
Can I use custom values not in the default scale?
Use arbitrary values in square brackets: w-[350px], text-[#1a1a1a], grid-cols-[200px_1fr_200px]. For reusable custom values, extend your theme in tailwind.config.js instead.
How do I keep long class lists readable?
Use Prettier with prettier-plugin-tailwindcss to auto-sort classes. In React, use the cn() utility (clsx + tailwind-merge) for conditional classes. Extract repeated patterns into components, not @apply.
Does Tailwind increase HTML file size?
Not significantly. Tailwind's JIT compiler only generates the CSS you actually use. Utility classes are highly cacheable and compressible (gzip loves repeated patterns). Most Tailwind sites have smaller CSS bundles than custom CSS projects.
Go from reference to real skills
Cheat sheets are great for quick lookups. Our in-depth courses take you from the fundamentals to professional-level mastery.
Browse all courses