Mobile-First is Built-In

Tailwind uses a mobile-first responsive design system. This means that un-prefixed classes (like text-center or p-4) apply to all screen sizes (from mobile phones up), while breakpoint-prefixed classes (like md:text-left or lg:p-8) only apply at that breakpoint and above.

The Default Breakpoints

Tailwind provides five default breakpoints, based on common device screen widths:

How to read responsive classes

When writing classes, think of the breakpoints as "from this screen size upwards":

• w-full md:w-1/2 lg:w-1/3
• Mobile: Width is 100% (w-full)
• Tablet (768px+): Width becomes 50% (md:w-1/2)
• Laptop/Desktop (1024px+): Width becomes 33.3% (lg:w-1/3)

• hidden md:block
• This is the standard way to show/hide elements on desktop vs mobile (hidden on mobile, block on tablet and above).

Always build from mobile up. Start by styling the mobile version, then add responsive prefixes to adjust margins, column sizes, paddings, and font sizes for wider screens. Do not use prefixes to target mobile screens (there is no mobile: prefix).

Responsive Layouts with Flex & Grid

Responsive design shines when paired with Flexbox and Grid. You can easily switch layout directions or column structures:

<!-- Flex direction change -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Sidebar/Left panel</div>
  <div class="flex-[3]">Main content</div>
</div>

<!-- Grid column change -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Practice task

In the editor below:

1. Make the outer card wrapper support dynamic layout: stack vertically on mobile (flex-col), and layout horizontally on desktop (md:flex-row).
2. Make the header section (the teal box) change width dynamically: full width on mobile, and one-third width on desktop (md:w-1/3).
3. Make the text content section center-aligned on mobile (text-center) but left-aligned on desktop (md:text-left).