Mobile First Breakpoints in TailwindCSS
? Mobile-First Breakpoints in Tailwind CSS
Tailwind CSS uses a mobile-first approach to responsive design, meaning styles apply to all screen sizes by default, and you scale them up using breakpoint prefixes like sm:, md:, etc.
? What Is Mobile-First?
You write base styles that work on small screens first (mobile), then layer on styles for larger screens using media query prefixes.
Example:
<p class="text-sm md:text-lg lg:text-xl"> This text gets larger on bigger screens.</p>? Tailwind’s Default Breakpoints
| Prefix | Min Width | Screen Type |
|---|---|---|
sm | 640px | Small (tablets) |
md | 768px | Medium (tablets/landscape) |
lg | 1024px | Large (laptops) |
xl | 1280px | Extra large (desktops) |
2xl | 1536px | 2x extra large (monitors) |
These are based on min-width, meaning:
md:applies when viewport is ?768pxIt includes everything larger than that too
? Examples
? Text Size
<h1 class="text-base sm:text-lg md:text-xl lg:text-2xl"> Responsive Heading</h1>? Grid Layout
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4"> <!-- Items --></div>? Visibility
<div class="block md:hidden">Show on mobile only</div><div class="hidden md:block">Show on tablets and up</div>?? Customizing Breakpoints
You can override the default breakpoints in tailwind.config.js:
module.exports = { theme: { screens: { xs: '475px', sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', } }}? Tip: Combine Responsiveness with States
<button class="bg-blue-500 hover:bg-blue-600 md:bg-green-500 md:hover:bg-green-600"> Responsive Hover</button>Would you like a visual cheat sheet or live code preview for breakpoints?
