Tailwind CSS Responsive Design Mobile-First Responsive Design with Breakpoint Prefixes

Tailwind CSS Beginner 1 min read

Mobile-First Responsive Design with Breakpoint Prefixes

Tailwind follows a mobile-first approach to responsive design. Unprefixed utilities apply at all screen sizes, and breakpoint prefixes add styles only when the viewport reaches or exceeds that breakpoint. The five default breakpoints are sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). Think of them as "at this size and wider" rather than "only at this size". This mobile-first philosophy means you start by styling for small screens without any prefix, then progressively enhance the layout for larger viewports. A column that stacks vertically on mobile and sits side-by-side on desktop is written as flex-col md:flex-row. A font size that is small on mobile and larger on desktop is text-sm lg:text-lg. This keeps the default styles lean and the responsive enhancements explicit. Tailwind does not provide a max-width variant out of the box because it encourages building upward from mobile. If you need to apply a style only below a breakpoint, you can use the max-sm:, max-md:, max-lg: variants introduced in Tailwind v3.2. These work as "below this breakpoint" modifiers and are useful when you need to undo a style for smaller screens without affecting the larger breakpoint cascade.

Example

<!-- Mobile-first column that becomes a row on md+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1 bg-blue-50 p-4 rounded-lg">Left panel</div>
  <div class="flex-1 bg-green-50 p-4 rounded-lg">Right panel</div>
</div>

<!-- Responsive grid: 1 col → 2 cols → 3 cols → 4 cols -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-xl shadow p-4">Card 1</div>
  <div class="bg-white rounded-xl shadow p-4">Card 2</div>
  <div class="bg-white rounded-xl shadow p-4">Card 3</div>
  <div class="bg-white rounded-xl shadow p-4">Card 4</div>
</div>

<!-- Responsive text sizes -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold">
  Responsive Heading
</h1>

<!-- Hide / show at breakpoints -->
<nav class="hidden md:flex gap-6">Desktop nav links</nav>
<button class="md:hidden p-2">☰ Mobile menu</button>

<!-- Responsive padding and max-width container pattern -->
<main class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  Page content
</main>

<!-- max-* variants (Tailwind v3.2+): apply only below breakpoint -->
<div class="max-md:text-center md:text-left">
  Centered on mobile, left-aligned on tablet+
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned