Responsive Design

🧑‍🏫 Sabse pehle — simple mein samjho#

Responsive design matlab mobile, tablet, aur laptop par website ka alag-alag theek se dikhna. Puraane zamane mein hum @media (min-width: 768px) jaisi lines likhte the. Tailwind mein iska shortcut hai. Tailwind hamesha Mobile-first chalta hai. Iska matlab bina kisi prefix (sm:, md:) ke jo class tum likhoge, wo sabse chhote mobile phone ke liye hogi. Phir md: (tablet) aur lg: (laptop) laga kar tum bade screens ke liye design change karte ho.

The Mobile-First Paradigm#

In Tailwind, unprefixed utilities (like w-full, p-4, flex-col) apply to all screen sizes, starting from the smallest mobile device upwards.

When you add a breakpoint prefix (like md:w-1/2), it overrides the base style only at that specific screen size and any screen size larger than it.

The Default Breakpoints#

• (No prefix): Mobile devices (0px and up)
• sm: Small devices / Large phones (640px and up)
• md: Medium devices / Tablets (768px and up)
• lg: Large devices / Laptops (1024px and up)
• xl: Extra large devices / Desktops (1280px and up)
• 2xl: Massive screens (1536px and up)

Practical Example: A Responsive Grid#

Let's say you want a list of products.

1. On a mobile phone, they should stack in a single column.
2. On a tablet, it should be 2 columns.
3. On a laptop, it should be 4 columns.

<!-- Responsive Grid: Resize your browser window to see the layout change! -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-6 bg-gray-50 rounded-2xl border border-gray-200">
  <!-- Card 1 -->
  <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center flex flex-col items-center">
    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold mb-3">1</div>
    <h4 class="font-bold text-gray-800 m-0">Mobile First</h4>
    <p class="text-xs text-gray-500 mt-2">Default 1 column</p>
  </div>
  <!-- Card 2 -->
  <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center flex flex-col items-center">
    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 font-bold mb-3">2</div>
    <h4 class="font-bold text-gray-800 m-0">Small Screens</h4>
    <p class="text-xs text-gray-500 mt-2">sm:grid-cols-2</p>
  </div>
  <!-- Card 3 -->
  <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center flex flex-col items-center">
    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mb-3">3</div>
    <h4 class="font-bold text-gray-800 m-0">Laptops</h4>
    <p class="text-xs text-gray-500 mt-2">lg:grid-cols-4</p>
  </div>
  <!-- Card 4 -->
  <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center flex flex-col items-center hidden sm:flex">
    <div class="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center text-rose-600 font-bold mb-3">4</div>
    <h4 class="font-bold text-gray-800 m-0">Visibility</h4>
    <p class="text-xs text-gray-500 mt-2">Hidden on mobile</p>
  </div>
</div>

Responsive States#

You can chain responsive prefixes with state prefixes! The responsive prefix always comes first.

• md:hover:bg-blue-500 (On tablet screens and up, hovering changes the background to blue. On mobile, hovering does nothing).

A Common Mistake#

A common mistake beginners make is writing sm:w-full lg:w-1/2. Because of mobile-first design, you don't need sm:w-full. You should just write w-full for mobile, and then lg:w-1/2 for laptops. The w-full will automatically carry over from mobile to tablet (md), until it gets overridden at lg.