Tailwind CSS utility class reference covering layout, flexbox, grid, spacing, typography, colors, backgrounds, responsive design, and state variants.
| Code / Syntax | Description |
|---|---|
container mx-auto | Centered responsive container |
block / inline / inline-block | Display modes |
hidden | Hide element (display: none) |
relative / absolute / fixed / sticky | Position types |
top-0 right-0 bottom-0 left-0 | Position an element at edges |
inset-0 | Shorthand for top/right/bottom/left: 0 |
z-10 / z-50 / z-auto | Z-index values |
overflow-hidden / overflow-auto / overflow-scroll | Overflow behavior |
aspect-video / aspect-square | Aspect ratio utilities |
object-cover / object-contain | Object-fit for images |
| Code / Syntax | Description |
|---|---|
flex items-center justify-between | Flexbox with centered items, spaced |
flex-col | Flex direction column |
flex-wrap | Allow flex items to wrap |
flex-1 / flex-auto / flex-none | Flex grow/shrink behavior |
gap-4 | Gap between flex/grid children (1rem) |
grid grid-cols-3 gap-4 | 3-column grid with gap |
grid-cols-[1fr_2fr] | Custom grid column sizes |
col-span-2 | Span 2 grid columns |
place-items-center | Center items in grid (both axes) |
justify-self-end / self-start | Individual item alignment |
order-first / order-last / order-1 | Flex/grid item order |
| Code / Syntax | Description |
|---|---|
p-4 | Padding 1rem on all sides |
px-4 py-2 | Horizontal padding 1rem, vertical 0.5rem |
pt-2 pb-4 pl-3 pr-3 | Individual side padding |
m-4 | Margin 1rem on all sides |
mx-auto | Center block element horizontally |
-mt-4 | Negative top margin |
space-x-4 | Horizontal spacing between children |
space-y-2 | Vertical spacing between children |
w-full / w-1/2 / w-screen | Width utilities |
h-64 / h-full / h-screen / h-dvh | Height utilities |
min-h-screen / max-w-lg | Min/max dimension constraints |
| Code / Syntax | Description |
|---|---|
text-sm / text-base / text-lg / text-xl | Font size |
font-bold / font-semibold / font-normal | Font weight |
font-mono / font-sans / font-serif | Font family |
text-center / text-left / text-right | Text alignment |
uppercase / lowercase / capitalize | Text transform |
tracking-wide / tracking-tight | Letter spacing |
leading-tight / leading-relaxed | Line height |
truncate | Truncate with ellipsis (single line) |
line-clamp-3 | Truncate after 3 lines |
whitespace-nowrap / whitespace-pre-wrap | Whitespace handling |
underline / no-underline / line-through | Text decoration |
| Code / Syntax | Description |
|---|---|
text-gray-700 / text-blue-500 | Text color |
bg-white / bg-gray-100 / bg-blue-600 | Background color |
bg-gradient-to-r from-blue-500 to-purple-600 | Gradient background |
text-white/80 | Text color with 80% opacity |
bg-black/50 | Semi-transparent background |
border border-gray-300 | Border with color |
ring-2 ring-blue-500 | Focus ring |
shadow-md / shadow-lg / shadow-xl | Box shadow |
rounded / rounded-lg / rounded-full | Border radius |
opacity-50 / opacity-0 | Element opacity |
divide-y divide-gray-200 | Dividers between children |
| Code / Syntax | Description |
|---|---|
sm:flex md:grid lg:hidden | Responsive breakpoints (640/768/1024px) |
hover:bg-blue-700 | Hover state |
focus:outline-none focus:ring-2 | Focus state styling |
active:scale-95 | Active/pressed state |
dark:bg-gray-900 dark:text-white | Dark mode variants |
group-hover:opacity-100 | Style child on parent hover |
disabled:opacity-50 disabled:cursor-not-allowed | Disabled state |
first:mt-0 last:mb-0 | First/last child selectors |
transition duration-300 ease-in-out | Transition animation |
animate-spin / animate-pulse / animate-bounce | Predefined animations |
peer-checked:bg-blue-500 | Style based on sibling state |
Found this cheat sheet useful? Check out our other references and tools.