block inline-block inline hidden
Display mode
flex inline-flex grid
Display flex/grid
flex-row flex-col flex-wrap
Flex direction and wrap
items-center items-start items-end
Align items (cross-axis)
justify-center justify-between justify-around
Justify content (main axis)
gap-4 gap-x-2 gap-y-6
Gap between flex/grid items
flex-1 flex-auto flex-none
Flex grow/shrink shortcuts
grid-cols-3 grid-cols-12
Grid template columns
col-span-2 col-span-full
Grid column span
grid-rows-3 row-span-2
Grid rows and row span
absolute relative fixed sticky
Position
top-0 right-4 bottom-2 left-auto
Position offsets
z-10 z-50 z-[9999]
z-index
overflow-hidden overflow-y-auto
Overflow
p-4 px-2 py-3 pt-6 pl-8
Padding (all/x/y/individual)
m-4 mx-auto my-6 mt-2
Margin
-mt-4 -mx-2
Negative margin
space-y-4 space-x-2
Space between children
w-full w-1/2 w-screen w-[320px]
Width
h-full h-screen h-16 h-[100px]
Height
min-h-screen min-h-0 max-h-96
Min/max height
max-w-md max-w-3xl max-w-prose
Max width presets
text-xs text-sm text-base text-lg text-xl text-2xl
Font size scale
font-thin font-normal font-bold font-black
Font weight
italic not-italic
Italic style
text-center text-left text-right text-justify
Text alignment
underline line-through no-underline
Text decoration
uppercase lowercase capitalize normal-case
Text transform
leading-tight leading-normal leading-relaxed
Line height
tracking-tight tracking-wide
Letter spacing
truncate text-ellipsis whitespace-nowrap
Truncate overflow text
font-mono font-sans font-serif
Font family
text-red-500 text-blue-700 text-gray-900
Text color
bg-blue-500 bg-white bg-transparent
Background color
bg-[#1da1f2]
Arbitrary hex color
bg-gradient-to-r from-pink-500 to-purple-500
Linear gradient
opacity-50 opacity-0 opacity-100
Opacity
border border-2 border-0
Border width
border-t border-b-2 border-l-0
Border on specific side
border-gray-300 border-blue-500
Border color
rounded rounded-lg rounded-full rounded-none
Border radius
rounded-tl-lg rounded-br-2xl
Corner-specific radius
shadow shadow-md shadow-lg shadow-2xl
Box shadow
shadow-none ring-2 ring-blue-500
No shadow / ring (focus outline)
blur backdrop-blur-sm
Blur filters
hover:bg-blue-600 focus:ring-2
Hover and focus state
disabled:opacity-50 disabled:cursor-not-allowed
Disabled state
group-hover:text-white peer-focus:border-blue-500
Group/peer states
dark:bg-gray-900 dark:text-white
Dark mode variants
first:mt-0 last:mb-0 odd:bg-gray-50
Structural variants
sm: md: lg: xl: 2xl:
Responsive breakpoint prefixes
text-sm md:text-base lg:text-lg
Responsive font size
flex-col md:flex-row
Stack mobile, row desktop
hidden md:block
Hide on mobile, show on desktop
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
Responsive grid columns
cursor-pointer cursor-not-allowed
Cursor style
select-none select-text
User select
pointer-events-none pointer-events-auto
Pointer events
transition transition-all duration-300 ease-in-out
CSS transition
transform rotate-45 scale-110 translate-x-2
Transforms
animate-spin animate-pulse animate-bounce
Built-in animations
Tailwind CSS Cheat Sheet — Spacing, Flex, Grid, Colors & Responsive Utilities
Tailwind CSS shipped in 2017 with the idea that single-purpose utility classes — `p-4`, `flex`, `text-center` — beat writing custom CSS for the average page; v2.1 introduced arbitrary values like `bg-[#1da1f2]` and the just-in-time engine, which v3 then made the default. The cheatsheet below covers 60+ utility classes across layout, spacing, typography, colors, borders, effects, states, responsive, and interactivity. Most trouble in real Tailwind markup doesn't come from forgetting class names. It comes from quirks that look ordinary but bite. The `space-x-4` utility puts a left margin on every direct child except the first, so wrapping items in an extra flex container silently breaks the spacing. The `dark:` variant only activates when the class strategy is configured — `media` follows the OS preference, `class` waits for a `dark` class on a parent. A class assembled at runtime like `bg-${color}-500` never enters the build, since the purger scans for whole class-name substrings. The snippets below are the ones an author reaches for when debugging exactly that — the right breakpoint, the right variant, the right arbitrary-value escape — without rereading the Tailwind reference from line one each time.
Common pitfalls in Tailwind
A few patterns earn their place on the first screen of any Tailwind project. Responsive prefixes are mobile-first: `text-sm md:text-base` means small text by default and base size from the `md` breakpoint upward, not the other way around. State variants stack with colons: `dark:hover:bg-gray-700` only fires in dark mode and only on hover. Arbitrary values use square brackets and accept any valid CSS value, but spaces need an underscore: `before:content-['Hello_world']` works while a literal space would break the class name. The `@apply` directive composes utilities into a custom class but cannot use variant prefixes like `hover:` or `md:` directly — those need the regular `:hover` or `@media` blocks around the `@apply`. Last-child edges on `space-x-*` and `divide-x-*` can be patched with `last:mr-0` when an extra trailing margin matters. The `safelist` config exists for classes assembled at runtime that the purger would otherwise drop. The cheatsheet groups all of this into Layout, Spacing, Typography, Colors, Borders, Effects, States, Responsive, and Interactive so the right section is one click away.
- 60+ Tailwind utility classes
- 9 categories organized by purpose
- Responsive prefixes (sm, md, lg, xl, 2xl)
- State variants (hover, focus, dark, group)
- Flex and Grid utilities
- One-click copy to clipboard
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).
By Marco B. ·