Responsive Design and Mobile First

Building layouts that adapt seamlessly to smartphones, tablets, and large desktop screens is essential. Tailwind CSS provides a simple, breakpoint-driven responsive design system.

1. Responsive Screen Breakpoints

Tailwind matches standard viewport width dimensions using 5 default breakpoints:

To apply styles at a specific breakpoint, prefix the utility class with the breakpoint name followed by a colon:

<!-- Grid with 1 column on mobile, and 4 columns on laptops -->
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
  <div>Item</div>
</div>

2. The Mobile-First Philosophy

Tailwind uses a mobile-first design system. This means that un-prefixed utility classes apply to all screen sizes starting from mobile, and breakpoint prefixes (such as md:) apply only at that width and above.

Common Mistake: Desktop-First Thinking

If you want to set an element width to 50% on desktop and 100% on mobile, do not write:

<!-- INCORRECT: Desktop-first thinking -->
<div className="md:w-1/2 w-full"></div>

Instead, define the base mobile style first, then layer on larger screen adjustments:

<!-- CORRECT: Mobile-first ordering -->
<div className="w-full md:w-1/2"></div>

3. Responsive Column Grid Example

Let us build a responsive profile card catalog that adapts to mobile, tablet, and desktop viewports:

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
  <div className="p-4 border rounded bg-white shadow">Card 1</div>
  <div className="p-4 border rounded bg-white shadow">Card 2</div>
  <div className="p-4 border rounded bg-white shadow">Card 3</div>
  <div className="p-4 border rounded bg-white shadow">Card 4</div>
</div>

Visual Behaviors

• Under 640px (Mobile): 1 column wide (fills full screen width).
• 640px to 1023px (Tablet): 2 columns wide.
• 1024px to 1279px (Laptop): 3 columns wide.
• 1280px and Above (Desktop): 4 columns wide.