theme: fancy
This Ultimate Tailwind CSS Quick Reference covers the core syntax of v3 and v4, ready to use after a quick look.
1. The Ultimate Layout Trio (For Emergencies)
Forget complex Flex and Grid keywords; just remember these three combinations:
| Requirement |
Class Combination |
Mnemonic |
| Horizontal Centering |
flex justify-center items-center |
Parent becomes flex, center on main + cross axis |
| Space Between |
flex justify-between items-center |
One on the left, one on the right, automatic space in the middle |
| Equal-Width Grid |
grid grid-cols-3 gap-4 |
3 columns, gap of 4; change the number from cols-1 to cols-12 |
2. Spacing & Sizing (Stop Memorizing px)
In Tailwind, the number 1 = 4px (0.25rem).
| Shorthand |
Value |
Use Case |
p-4 / m-4 |
16px |
Padding/Margin (all sides) |
px-6 / py-2 |
L/R 24px / T/B 8px |
Classic button padding |
gap-3 |
12px |
Flex/Grid gap |
w-1/2 |
50% |
Half width |
w-full |
100% |
Full parent width |
h-screen |
100vh |
Full screen height |
3. Text & Color (Most Common)
| Requirement |
Class |
Notes |
| Font Size |
text-sm / text-base / text-lg / text-2xl |
Base is 16px by default, 2xl is 24px |
| Font Weight |
font-normal / font-medium / font-bold |
400 / 500 / 700 |
| Text Color (v3) |
text-blue-500 |
500 is the mid-tone |
| Text Color (v4 new) |
text-blue-500/50 |
Add /opacity directly at the end, no need for text-opacity-50 |
| Background Color |
bg-gray-100 / bg-white |
- |
| Background Opacity |
bg-black/50 |
Supported in both v3/v4, 50% transparent black |
4. Border Radius & Borders (For Aesthetics)
| Requirement |
Class |
Value |
| Large Radius |
rounded-xl or rounded-2xl |
12px / 16px |
| Full Round |
rounded-full |
50%, for avatars or pill buttons |
| Border |
border border-gray-200 |
1px gray border |
| Focus Ring |
focus:ring-2 focus:ring-blue-400 |
Glowing ring when input is focused |
5. Responsive Breakpoints (Mobile First)
Remember: sm for phones, md for tablets, lg for laptops.
Syntax: {breakpoint}:{class}, e.g., md:flex means "become Flex on tablets".
| Breakpoint |
Min Width |
Common Scenario |
sm: |
640px |
Phone landscape |
md: |
768px |
Portrait tablet |
lg: |
1024px |
Laptop/Desktop (most common) |
xl: |
1280px |
Large desktop |
| Default (none) |
0px |
Phone portrait (always write mobile styles first) |
6. State Pseudo-classes (Essential for Interaction)
| Syntax |
Effect |
Example |
hover:class |
Mouse hover |
hover:bg-blue-600 |
focus:class |
Click to select |
focus:outline-none (removes default blue border on inputs) |
active:class |
Moment of click |
active:scale-95 (click scaling effect) |
disabled:class |
Disabled state |
disabled:opacity-50 |
7. v3 vs v4 Syntax Comparison (Pitfall Avoidance)
| Scenario |
v3 Syntax |
v4 Syntax (New) |
| Opacity |
bg-black bg-opacity-50 |
bg-black/50 (shorthand) |
| Shadow |
shadow-md |
shadow-sm is now smaller; old shadow-sm becomes shadow-xs |
| Custom Colors |
Write in tailwind.config.js |
Write in CSS @theme { --color-xxx: #fff; } |
| Import |
@tailwind base; etc. (three lines) |
@import "tailwindcss"; (one line) |
8. The Universal Escape Hatch (Use When You Can't Remember)
If a class doesn't work or you need a CSS calculated value, use square brackets:
- Arbitrary value:
w-[200px] (width 200px)
- Arbitrary color:
bg-[#f0f0f0]
- Arbitrary grid:
grid-cols-[200px,1fr]
💡 One-Liner Mnemonic (Memorize This)
Parent is Flex, children centered; gray border, large radius;
Write mobile first, add md for tablets;
For opacity, add a slash; square brackets write the world.