Warming up the neural circuits...
Responsive design means your website adapts its layout and styling to look great on any screen size — from a 320px phone to a 2560px monitor.
Without responsive design, your beautiful desktop layout would look tiny and broken on mobile.
Design for the smallest screen first, then enhance for larger screens. This is called mobile-first design and it's what Tailwind assumes by default.
/* Start with desktop styles */
.sidebar { width: 300px; float: left; }
/* Then override for mobile */
@media (max-width: 768px) {
.sidebar { width: 100%; float: none; }
}Problem: You write desktop , then undo it for mobile. More code, more complexity.
<!-- Start with mobile styles, enhance for desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card</div>
<div>Card</div>
<div>Card</div>
</div>Benefit: Start simple (1 column on phone), enhance for larger screens (2 columns tablet, 3 columns desktop). Less code, more natural.
Tailwind uses min-width breakpoints. Everything without a prefix applies to mobile first, then you override at each breakpoint:
| Prefix | Min Width | CSS Equivalent | Target Devices |
|---|---|---|---|
| (none) | 0px | Default | All mobile phones |
sm: | 640px | @media (min-width: 640px) | Large phones, landscape |
md: | 768px | @media (min-width: 768px) | Tablets |
lg: | 1024px | @media (min-width: 1024px) | Laptops, small desktops |
xl: | 1280px | @media (min-width: 1280px) | Desktops |
2xl: | 1536px | @media (min-width: 1536px) | Large monitors |
Read grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 as:
md:)lg:)Each class only applies at that breakpoint AND above.
<!-- 1 col mobile, 2 col tablet, 4 col desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-4 rounded-lg shadow">Item 1</div>
<div class="bg-white p-4 rounded-lg shadow">Item 2</div>
<div class
<!-- Stack on mobile, side-by-side on desktop -->
<div class="flex flex-col md:flex-row gap-6">
<aside class="w-full md:w-64 bg-gray-100 p-4 rounded-lg">
Sidebar
</aside>
<main class="flex-1">
<p>Main content flows right here...</p
<!-- Smaller on mobile, larger on desktop -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
Responsive Heading
</h1>
<p class="text-sm md:text-base lg:text-lg text-gray-600">
Paragraph text that gets bigger on larger screens for better readability.
</p><!-- Less padding on mobile, more on desktop -->
<section class="px-4 md:px-8 py-8 md:py-16">
Content with responsive padding
</section><!-- Show/hide elements at different breakpoints -->
<nav class="hidden md:block">Desktop navigation (hidden on mobile)</nav>
<button class="block md:hidden">Mobile hamburger menu (hidden on desktop)</button><img
src="image-mobile.jpg"
srcset="image-tablet.jpg 768w, image-desktop.jpg 1280w"
alt="Responsive image"
class="w-full h-48 md:h-64 lg:h-80 object-cover rounded-lg"
/><div class="grid grid-cols-3 gap-4">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>Problem: On a 375px phone, 3 columns means each card is ~100px wide. Unreadable.
<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>Result: 1 col on phone → 2 on tablet → 3 on desktop → 4 on large screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Dashboard
<nav class="flex justify-between items-center p-4">
<h1 class="text-xl font-bold">Logo</h1>
<!-- Mobile: hidden. Desktop: visible -->
<ul class="hidden md:flex gap-6">
<li><a href
<section class="flex flex-col md:flex-row items-center gap-8 p-8">
<div class="flex-1 text-center md:text-left">
<h1 class="text-3xl md:text-5xl font-bold mb-4">Build Amazing Apps</h1>
<p class="text-gray-600 mb-6">Start building today...</p>
md and lg cover 90% of use casessm:, md:, lg:, xl:, 2xl:grid-cols-1 md:grid-cols-3flex-col md:flex-rowp-4 md:p-8hidden md:blocktext-xl md:text-4xldark: prefix for responsive theme switching