Responsive Classes

Mobile-First Approach

Tailwind CSS uses a mobile-first breakpoint system. This means unprefixed utilities apply to all screen sizes, while prefixed utilities apply at that breakpoint and above.

Default Breakpoints

How It Works

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

This means:

• All screens (0px+): text-sm (0.875rem)
• 768px+ (md): text-base (1rem)
• 1024px+ (lg): text-lg (1.125rem)

Responsive Layout Example

Build a layout that stacks on mobile and goes side-by-side on larger screens:

<div class="flex flex-col md:flex-row gap-8 p-6">
  <!-- Sidebar -->
  <aside class="w-full md:w-64 bg-gray-100 p-4 rounded-lg">
    <h3 class="font-bold mb-4">Sidebar</h3>
    <ul class="space-y-2 text-sm">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Profile</a></li>
    </ul>
  </aside>

  <!-- Main content -->
  <main class="flex-1 bg-white p-6 rounded-lg shadow">
    <h2 class="text-xl md:text-2xl font-bold mb-4">Main Content</h2>
    <p class="text-gray-600">This area grows to fill the remaining space.</p>
  </main>
</div>

On mobile: sidebar stacks on top of main content (full width). On md screens and above: sidebar is fixed at w-64, main content fills the rest.

Responsive Grid

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

This grid adapts: 1 column on mobile → 2 on small → 3 on large → 4 on extra large.

Hiding & Showing Elements

<!-- Hidden on mobile, visible on md+ -->
<div class="hidden md:block">
  Desktop-only content
</div>

<!-- Visible on mobile, hidden on md+ -->
<div class="block md:hidden">
  Mobile-only content
</div>

This is commonly used for navigation menus — showing a hamburger icon on mobile and full links on desktop.

Responsive Spacing & Typography

<section class="px-4 md:px-8 lg:px-16 py-8 md:py-16">
  <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
    Responsive Heading
  </h1>
  <p class="mt-4 text-base md:text-lg text-gray-600 max-w-xl md:max-w-2xl">
    The text size, spacing, and max-width all adapt to the screen size.
  </p>
</section>

Responsive Flexbox Direction

A very common pattern — column on mobile, row on desktop:

<div class="flex flex-col lg:flex-row gap-6">
  <div class="lg:w-1/3">One third on desktop</div>
  <div class="lg:w-2/3">Two thirds on desktop</div>
</div>

Custom Breakpoints

If the default breakpoints don't suit your project, customize them in tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
};

Practical Example — Responsive Hero

<section class="bg-gradient-to-br from-indigo-600 to-purple-700 text-white">
  <div class="max-w-6xl mx-auto px-4 py-16 md:py-24 lg:py-32 flex flex-col lg:flex-row items-center gap-12">
    <div class="lg:w-1/2 text-center lg:text-left">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight">
        Build Stunning Websites Faster
      </h1>
      <p class="mt-4 text-lg text-indigo-100 max-w-lg mx-auto lg:mx-0">
        Tailwind CSS gives you the tools to create beautiful, responsive designs without writing custom CSS.
      </p>
      <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
        <a href="#" class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-lg hover:bg-indigo-50">
          Get Started
        </a>
        <a href="#" class="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white/10">
          Learn More
        </a>
      </div>
    </div>
    <div class="lg:w-1/2">
      <div class="bg-white/10 backdrop-blur rounded-2xl p-8 text-center">
        <p class="text-6xl">🚀</p>
        <p class="mt-4 text-indigo-200">Hero image placeholder</p>
      </div>
    </div>
  </div>
</section>

Recap

• Tailwind is mobile-first: unprefixed classes apply to all screens, prefixed classes apply at that breakpoint and above.
• Default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).
• Use hidden/block with prefixes to show/hide elements responsively.
• Responsive prefixes work with any utility: layout, spacing, typography, colors, and more.

Next, we will build card components using what we have learned so far.