Tailwind CSS Responsive Design
In Tailwind, you make a design responsive by adding a breakpoint prefix in front of any class.
Breakpoint Prefixes
| Prefix | Screen width | Typical device |
|---|---|---|
| (none) | All sizes | Phones and up |
sm: | 40rem (640px) and wider | Large phones |
md: | 48rem (768px) and wider | Tablets |
lg: | 64rem (1024px) and wider | Laptops |
xl: | 80rem (1280px) and wider | Desktops |
2xl: | 96rem (1536px) and wider | Large screens |
A class like md:text-xl means "use text-xl when the screen is at least 768px wide".
Mobile First
Tailwind is mobile-first. A class with no prefix works on every screen, including phones. A prefixed class only starts working from that width upwards.
Example
<h1 class="text-2xl md:text-4xl lg:text-5xl">Welcome</h1>| Screen | Font size used |
|---|---|
| Phone | text-2xl |
| Tablet (768px+) | text-4xl |
| Laptop (1024px+) | text-5xl |
A common mistake is to use sm: for phones. sm: does not mean "small screens only". Write phone styles with no prefix, then add sm:, md: and lg: for bigger screens.
A Responsive Card Grid
Resize the result window and watch the columns change.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-4">
<h1 class="text-2xl md:text-4xl font-bold text-center mb-6">Our Courses</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-5 rounded-lg shadow-sm">Web Development</div>
<div class="bg-white p-5 rounded-lg shadow-sm">Graphic Design</div>
<div class="bg-white p-5 rounded-lg shadow-sm">Digital Marketing</div>
<div class="bg-white p-5 rounded-lg shadow-sm">Python</div>
</div>
</body>
</html>On a phone the cards are in one column, on large phones and tablets two, and on laptops four.
Changing Layout Direction
A very common pattern: stack items on phones, put them side by side on bigger screens.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-4">
<div class="flex flex-col md:flex-row gap-6 items-center bg-cyan-50 p-6 rounded-xl">
<div class="w-full md:w-1/3 h-40 bg-cyan-400 rounded-lg"></div>
<div class="w-full md:w-2/3 text-center md:text-left">
<h2 class="text-2xl font-bold">Free Coding Workshop</h2>
<p class="text-gray-600 mt-2">Saturday at 4 pm, Orangi Town. Bring your laptop if you have one.</p>
<button class="mt-4 w-full md:w-auto bg-cyan-600 text-white px-6 py-2 rounded-lg">Reserve a seat</button>
</div>
</div>
</body>
</html>Notice how one element can have several responsive classes: the button is full width on phones (w-full) and normal width from tablets (md:w-auto).
Showing and Hiding
hidden md:blockhides an element on phones and shows it from tabletsmd:hiddenshows an element on phones only
Example
<button class="md:hidden">Menu</button>
<nav class="hidden md:flex gap-6">
<a href="#">Home</a>
<a href="#">Courses</a>
</nav>Max-width Variants
Sometimes you want a style only below a size. Use max- in front: max-md:hidden hides an element on screens smaller than 768px.
Exercise
Exercise
What does the class lg:grid-cols-3 do?