Layout
| Class | Description |
|---|
flex / inline-flex | Flexbox |
grid / inline-grid | CSS Grid |
block / inline / inline-block / hidden | Display |
container | Centered max-width container |
flex-row / flex-col | Flex direction |
flex-wrap / flex-nowrap | Wrap behavior |
items-center / items-start / items-end | Align items |
justify-center / justify-between / justify-around | Justify content |
flex-1 / flex-none / flex-auto | Flex grow/shrink |
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-4">
Spacing
| Class | Description |
|---|
p-4 / px-4 / py-2 / pt-1 | Padding (0.25rem steps) |
m-4 / mx-auto / my-2 | Margin |
gap-4 / gap-x-2 / gap-y-6 | Gap (flex/grid) |
space-x-4 / space-y-2 | Space between children |
space-x-reverse | Reverse space direction |
Scale: 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 56 64 72 80 96
Typography
| Class | Description |
|---|
text-xs β text-9xl | Font size |
font-thin font-normal font-medium font-semibold font-bold | Font weight |
text-gray-500 / text-blue-600 | Text color |
leading-none / leading-tight / leading-normal / leading-relaxed | Line height |
tracking-tighter / tracking-normal / tracking-widest | Letter spacing |
text-left / text-center / text-right | Text align |
uppercase / lowercase / capitalize | Text transform |
truncate / line-clamp-3 | Text overflow |
Colors & Backgrounds
| Class | Description |
|---|
bg-white / bg-gray-100 / bg-blue-500 | Background color |
bg-opacity-50 | Background opacity |
text-* / border-* | Text & border colors |
from-* / via-* / to-* | Gradient stops |
bg-gradient-to-r / bg-gradient-to-b | Gradient direction |
Color scale: 50 100 200 300 400 500 600 700 800 900 950
Borders & Rounded
| Class | Description |
|---|
border / border-2 / border-4 | Border width |
border-gray-200 | Border color |
border-t / border-x / border-b | Border sides |
rounded / rounded-lg / rounded-xl / rounded-full | Border radius |
rounded-t-lg / rounded-br-md | Per-corner radius |
Shadows
| Class | Description |
|---|
shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl | Box shadow |
shadow-inner | Inner shadow |
shadow-none | Remove shadow |
shadow-color | Colored shadow (Tailwind v4) |
Responsive Breakpoints
| Prefix | Min width |
|---|
| (default) | 0px |
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
2xl: | 1536px |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<p class="text-sm md:text-base lg:text-lg">
States
| Prefix | Trigger |
|---|
hover: | Mouse hover |
focus: | Keyboard/focus |
active: | Mouse down |
disabled: | Disabled state |
group-hover: | Parent hover (use group on parent) |
peer-*: | Sibling state (use peer on sibling) |
dark: | Dark mode |
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">
<div class="group"><span class="group-hover:text-blue-500">
Transitions & Animations
| Class | Description |
|---|
transition / transition-all / transition-colors | Transition |
duration-150 / duration-300 / duration-500 | Duration |
ease-in / ease-out / ease-in-out | Easing |
animate-spin / animate-ping / animate-pulse / animate-bounce | Built-in animations |
delay-75 / delay-150 | Transition delay |
Arbitrary Values
Use [] for custom values not in the default scale:
<div class="w-[137px] h-[42px]">
<p class="text-[13px] leading-[1.6]">
<div class="bg-[#1da1f2] top-[calc(100%-1rem)]">
Common Component Patterns
Card
<div class="rounded-lg border bg-white p-6 shadow-md">
Button
<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Input
<input class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
Badge
<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">