Part 35: Mobile-First Responsive Design Philosophy

Tailwind CSS employs a strict Mobile-First responsive architecture using min-width media queries.

1. How Mobile-First Works

Unprefixed utilities apply to all screen sizes (starting from mobile). Breakpoint prefixes apply to that screen size and larger:

<!-- On mobile: font size is small (text-sm)
     On medium screens (md: 768px+): font size increases to base
     On large screens (lg: 1024px+): font size becomes xl -->
<h2 class="text-sm md:text-base lg:text-xl">Responsive Headline</h2>

⚠️ Common Beginner Anti-Pattern:

Don't write sm:text-sm md:text-base if text-sm is your default. Simply write:

<h2 class="text-sm md:text-base">Headline</h2>

Key Takeaways

• Design for mobile first, then layer on larger screen adjustments with prefixes.
• Unprefixed classes define the mobile foundation.

In Part 36, we explore the Standard Breakpoints: sm, md, lg, xl, and 2xl!