1️⃣ Breakpoint Reference Table
| Prefix | Device Type | Width Range | Meaning |
|---|---|---|---|
| No Prefix | Mobile | < 640px | Default styles apply |
| sm: | Small Devices | ≥ 640px < 768px | Applies at 640px+ |
| md: | Tablets | ≥ 768px < 1024px | Overrides sm |
| lg: | Laptops | ≥ 1024px < 1280px | Overrides md |
| xl: | Big Desktops | ≥ 1280px < 1536px | Overrides lg |
| 2xl: | Very Large Screens | ≥ 1536px | Final override |
2️⃣ Responsive Utility Examples
text-sm md:text-lg lg:text-xl
bg-red-500 md:bg-blue-500 lg:bg-green-500
p-2 sm:p-4 lg:p-10
flex-col md:flex-row
hidden md:block
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
3️⃣ Mobile-First Rule
Tailwind applies styles to mobile first, then overrides at bigger breakpoints.
✔ Default → 0px to 639px
✔ sm: overrides at ≥ 640px
✔ md: overrides at ≥ 768px
✔ lg: overrides at ≥ 1024px
4️⃣ Max-Width Breakpoints
Tailwind also provides max-breakpoints like:
max-sm:hidden
max-md:bg-red-500
max-lg:text-green-600
✔ Useful for hiding elements on smaller screens ✔ Works reverse of normal breakpoints
5️⃣ Arbitrary Media Queries (Advanced)
When you need exact control (e.g., hide 800px–1200px only), use arbitrary queries:
class="[@media(min-width:800px)_and_(max-width:1200px)]:hidden"
6️⃣ Responsive Spacing (Padding / Margin)
p-2 sm:p-4 md:p-8 lg:p-16
m-1 sm:m-3 md:m-6
gap-2 md:gap-6 lg:gap-10
7️⃣ Responsive Display Utilities
hidden md:block
flex md:inline-flex lg:flex
block md:flex
8️⃣ Responsive Layout (Flex & Grid)
/* Flex */
flex-col sm:flex-row
/* Grid */
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4