Core Concepts
Responsive Design
Tailwind is mobile-first. You write base styles for small screens, then use responsive prefixes to change them at larger breakpoints.
Breakpoint prefixes
Add a breakpoint prefix to any utility to apply it from that screen width and up. Unprefixed utilities apply to all sizes (mobile-first).
| Prefix | Applies from (min-width) |
|---|---|
| sm: | 640px |
| md: | 768px |
| lg: | 1024px |
| xl: | 1280px |
| 2xl: | 1536px |
Example
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-sky-100 p-6 rounded-lg text-center">1</div>
<div class="bg-sky-100 p-6 rounded-lg text-center">2</div>
<div class="bg-sky-100 p-6 rounded-lg text-center">3</div>
</div>⚠️
md:text-lg does NOT mean "only on medium screens" — it means "from medium and up". Style the smallest screen first without a prefix, then layer overrides.
Example
<div class="p-4 md:p-8 bg-white rounded-xl shadow">
<p class="text-base md:text-xl lg:text-2xl font-bold">This text grows on bigger screens.</p>
</div>