Responsive Design in Tailwind CSS 4 – Complete Guide
Modern websites must work perfectly on mobile phones, tablets, laptops, and large screens. This is where responsive design becomes essential.
Tailwind CSS makes responsive design very simple using mobile-first utility classes and breakpoints.
In this tutorial you will learn:
- Mobile-first approach
- Tailwind breakpoints explained
- sm, md, lg, xl, 2xl utilities
- Responsive navbar example
- Responsive card layout example
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a basic HTML structure.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-6">
<h1 class="text-3xl font-bold mb-6">
Responsive Design with Tailwind CSS
</h1>
</body>
</html>
Now you can use responsive utilities.
Mobile-First Approach
Tailwind follows a mobile-first design approach.
This means:
- Default styles apply to mobile devices
- Larger screens override styles using breakpoints
Example:
<div class="text-sm md:text-lg lg:text-2xl">
Responsive Text
</div>
Behavior:
| Screen | Text Size |
|---|---|
| Mobile | small |
| Tablet | large |
| Desktop | extra large |
This approach ensures your website works well on all screen sizes.
Breakpoints Explained
Tailwind provides predefined breakpoints for responsive design.
| Breakpoint | Screen Size |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Usage pattern:
breakpoint:utility
Example:
md:flex
lg:grid
Meaning:
- Apply style only when screen reaches that size.
Example – Responsive Layout
<div class="bg-blue-500 text-white p-4
sm:bg-green-500
md:bg-yellow-500
lg:bg-purple-500">
Responsive Background
</div>
Result:
| Screen | Color |
|---|---|
| Mobile | Blue |
| Small screens | Green |
| Tablet | Yellow |
| Desktop | Purple |
Using Breakpoints (sm, md, lg, xl, 2xl)
Example
<div class="text-sm
sm:text-base
md:text-lg
lg:text-xl
xl:text-2xl
2xl:text-3xl">
Responsive Typography
</div>
This automatically scales typography across devices.
Responsive Navbar Example
A responsive navbar is one of the most common UI patterns.
<nav class="bg-blue-600 text-white p-4">
<div class="flex justify-between items-center">
<div class="text-xl font-bold">
MySite
</div>
<div class="hidden md:flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="md:hidden">
☰
</div>
</div>
</nav>
Behavior:
| Screen | Navbar |
|---|---|
| Mobile | Menu icon |
| Desktop | Full menu |
Explanation:
hidden md:flex→ hidden on mobile, visible on desktopmd:hidden→ visible on mobile only
Responsive Cards Example
Cards are widely used in modern UI design.
Responsive Grid Cards
<div class="grid grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
gap-6 p-6">
<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">
Card 1
</h3>
<p class="text-gray-600 mt-2">
Example description
</p>
</div>
<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">
Card 2
</h3>
<p class="text-gray-600 mt-2">
Example description
</p>
</div>
<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">
Card 3
</h3>
<p class="text-gray-600 mt-2">
Example description
</p>
</div>
</div>
Layout behavior:
| Screen | Columns |
|---|---|
| Mobile | 1 |
| Tablet | 2 |
| Desktop | 3 |
Example – Responsive Flex Layout
<div class="flex flex-col md:flex-row gap-6 p-6 bg-gray-100">
<div class="bg-blue-500 text-white p-6">
Sidebar
</div>
<div class="bg-white shadow p-6 flex-1">
Main Content
</div>
</div>
Behavior:
| Screen | Layout |
|---|---|
| Mobile | Vertical |
| Desktop | Horizontal |
Real Example – Responsive Blog Layout
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-6">
<div class="bg-white shadow p-6 rounded">
<h3 class="text-lg font-semibold">
Blog Post
</h3>
<p class="text-gray-600">
Sample blog description
</p>
</div>
<div class="bg-white shadow p-6 rounded">
<h3 class="text-lg font-semibold">
Blog Post
</h3>
<p class="text-gray-600">
Sample blog description
</p>
</div>
<div class="bg-white shadow p-6 rounded">
<h3 class="text-lg font-semibold">
Blog Post
</h3>
<p class="text-gray-600">
Sample blog description
</p>
</div>
</div>
Perfect for:
- blog websites
- portfolio pages
- product grids
Why Tailwind is Great for Responsive Design
Mobile-First System
Tailwind automatically follows best responsive practices.
Simple Breakpoints
Easy syntax using sm:, md:, lg:.
Faster Development
No custom media queries required.
Clean Code
Utility classes keep layouts organized.
FAQs
What is responsive design?
Responsive design ensures websites adapt to different screen sizes and devices.
What does mobile-first mean?
Mobile-first means designing for mobile screens first, then enhancing for larger screens.
What are Tailwind breakpoints?
Tailwind breakpoints define screen sizes where styles change.
Example:
md:text-lg
What does md: mean in Tailwind?
md: applies styles when screen width is 768px or larger.
Can Tailwind create fully responsive layouts?
Yes. Tailwind provides responsive utilities for layout, spacing, typography, and components.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.