1️⃣ Tailwind Memory Formula
Tailwind follows one simple pattern:
property-value
font-size: text-xl
padding: p-4
margin-top: mt-2
background: bg-red-500
2️⃣ Colors: Shade Logic
Tailwind colors follow this predictable pattern:
color-shade
100
300
500
700
900
3️⃣ Spacing = 4px Scale
The most important memory rule:
1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px…
p-2 = 8px
p-4 = 16px
p-6 = 24px
p-10 = 40px
4️⃣ Responsive Breakpoints (Tailwind CSS)
More in DetailTailwind uses mobile-first breakpoints. This means styles apply first on small screens and then get overridden on larger screens using breakpoint prefixes.
| Prefix | Device Type | Width Range | Rule Meaning |
|---|---|---|---|
| No Prefix | Mobile First | < 640px | Apply on all screens smaller than 640px |
| sm: | Small screens | ≥ 640px and < 768px | Applies when screen is at least 640px wide |
| md: | Tablets | ≥ 768px and < 1024px | Overrides sm: and default when width ≥ 768px |
| lg: | Laptops | ≥ 1024px and < 1280px | Overrides md: when width ≥ 1024px |
| xl: | Desktops | ≥ 1280px and < 1536px | Overrides lg: when width ≥ 1280px |
| 2xl: | Large Screens | ≥ 1536px | Applies on very large displays |
When you write:
text-sm md:text-lg lg:text-xl
- text-sm → applied on mobile (< 768px)
- md:text-lg → applied when width ≥ 768px
- lg:text-xl → overrides previous when width ≥ 1024px
📌 Rule: Larger breakpoints override smaller ones.
"lg:" beats "md:", "md:" beats "sm:", and "sm:" beats default.
5️⃣ Flex & Grid Genius Pattern
Flexbox
flex flex-col items-center justify-between gap-4
Grid
grid grid-cols-3 gap-6