Responsive Design

Responsive Design in Tailwind

Tailwind uses a mobile-first approach to responsive design. Unprefixed utilities apply to all screen sizes, while prefixed utilities apply at specific breakpoints and above.

Default Breakpoints

Prefix	Min Width	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

Mobile-First Approach

<!-- This text is:
     - Small (text-sm) on mobile
     - Base size (text-base) on md screens and up
     - Large (text-lg) on lg screens and up
-->
<p class="text-sm md:text-base lg:text-lg">
  Responsive text
</p>

Responsive Layout Examples

<!-- Stack on mobile, row on larger screens -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<!-- Responsive width -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width container
</div>

Responsive Spacing

<!-- Responsive padding -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  Content with responsive padding
</div>

<!-- Responsive margins -->
<div class="mx-4 md:mx-8 lg:mx-auto lg:max-w-4xl">
  Centered content on large screens
</div>

<!-- Responsive gap -->
<div class="flex gap-2 md:gap-4 lg:gap-6">
  <div>Item</div>
  <div>Item</div>
</div>

Showing and Hiding Elements

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

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

<!-- Different display types per breakpoint -->
<div class="hidden sm:flex lg:grid lg:grid-cols-3">
  Responsive display
</div>

Responsive Typography

<!-- Responsive heading -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<!-- Responsive line height -->
<p class="leading-tight md:leading-normal lg:leading-relaxed">
  Text with responsive line height
</p>

<!-- Responsive text alignment -->
<p class="text-center md:text-left">
  Centered on mobile, left-aligned on desktop
</p>

Responsive Navigation Pattern

<nav class="bg-white shadow">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <span class="font-bold text-xl">Logo</span>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Services</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </div>

      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="p-2 rounded-md text-gray-400 hover:text-gray-500">
          <!-- Hamburger icon -->
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Responsive Card Layout

<div class="p-4 md:p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <img class="w-full h-48 object-cover rounded-lg mb-4" src="image.jpg" alt="Card image">
      <h3 class="text-lg md:text-xl font-semibold mb-2">Card Title</h3>
      <p class="text-gray-600 text-sm md:text-base">
        Card description that adjusts based on screen size.
      </p>
    </div>
    <!-- More cards... -->
  </div>
</div>

Custom Breakpoints

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
  },
}