majiayu000 Tailwind CSS - Responsive Design
Tailwind CSS provides a mobile-first responsive design system using breakpoint prefixes that make it easy to build adaptive layouts.
Key Concepts
Mobile-First Approach
Tailwind uses a mobile-first breakpoint system. Unprefixed utilities apply to all screen sizes, and breakpoint prefixes apply from that breakpoint and up:
<!-- Mobile: full width, Tablet+: half width, Desktop+: third width -->
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width
</div>
Default Breakpoints
// tailwind.config.js default breakpoints
{
sm: '640px', // Small devices (landscape phones)
md: '768px', // Medium devices (tablets)
lg: '1024px', // Large devices (desktops)
xl: '1280px', // Extra large devices (large desktops)
'2xl': '1536px' // 2X large devices (larger desktops)
}
Best Practices
1. Start Mobile, Scale Up
Design for mobile first, then add complexity for larger screens:
<!-- Good: Mobile-first approach -->
<div class="
flex flex-col
md:flex-row
gap-4
">
<div class="w-full md:w-1/2">Column 1</div>
<div class="w-full md:w-1/2">Column 2</div>
</div>
<!-- Bad: Desktop-first (requires more overrides) -->
<div class="
flex flex-row
sm:flex-col
">
2. Use Responsive Typography
Scale text appropriately across devices:
<h1 class="
text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl
font-bold
leading-tight
">
Responsive Heading
</h1>
<p class="
text-sm sm:text-base md:text-lg
leading-relaxed
">
Body text that scales
</p>
3. Responsive Spacing
Adjust padding and margins for different screens:
<div class="
px-4 sm:px-6 md:px-8 lg:px-12
py-8 md:py-12 lg:py-16
">
<!-- Content with responsive padding -->
</div>
<section class="
space-y-4 md:space-y-6 lg:space-y-8
">
<!-- Responsive spacing between children -->
</section>
4. Grid Layouts
Create responsive grids that adapt to screen size:
<!-- 1 column mobile, 2 tablet, 3 desktop, 4 large desktop -->
<div class="
grid
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
xl:grid-cols-4
gap-4 md:gap-6
">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
5. Show/Hide Elements
Control visibility across breakpoints:
<!-- Mobile menu button: visible on mobile, hidden on desktop -->
<button class="md:hidden">
<svg><!-- Menu icon --></svg>
</button>
<!-- Desktop navigation: hidden on mobile, visible on desktop -->
<nav class="hidden md:flex space-x-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<!-- Show only on mobile -->
<div class="block md:hidden">Mobile only</div>
<!-- Show only on desktop -->
<div class="hidden lg:block">Desktop only</div>
Examples
Responsive Hero Section
<section class="
relative
min-h-screen md:min-h-[600px] lg:min-h-[800px]
px-4 sm:px-6 lg:px-8
py-12 md:py-16 lg:py-20
">
<div class="
max-w-7xl mx-auto
flex flex-col md:flex-row
items-center
gap-8 md:gap-12
">
<!-- Text Content -->
<div class="
w-full md:w-1/2
text-center md:text-left
">
<h1 class="
text-3xl sm:text-4xl md:text-5xl lg:text-6xl
font-bold
mb-4 md:mb-6
">
Welcome to Our Site
</h1>
<p class="
text-base sm:text-lg md:text-xl
text-gray-600
mb-6 md:mb-8
">
This is a responsive hero section that adapts to all screen sizes.
</p>
<button class="
w-full sm:w-auto
px-6 md:px-8
py-3 md:py-4
bg-blue-500 hover:bg-blue-600
text-white
text-base md:text-lg
rounded-lg
">
Get Started
</button>
</div>
<!-- Image -->
<div class="
w-full md:w-1/2
order-first md:order-last
">
<img
src="/hero.jpg"
alt="Hero"
class="
w-full
rounded-lg md:rounded-xl
shadow-lg md:shadow-2xl
"
/>
</div>
</div>
</section>
Responsive Card Grid
<div class="
grid
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
xl:grid-cols-4
gap-4 sm:gap-6 lg:gap-8
px-4 sm:px-6 lg:px-8
">
{cards.map(card => (
<div class="
bg-white
rounded-lg md:rounded-xl
shadow-md hover:shadow-xl
overflow-hidden
transition-shadow
">
<img
src={card.image}
alt={card.title}
class="
w-full
h-48 sm:h-56 lg:h-64
object-cover
"
/>
<div class="
p-4 sm:p-5 lg:p-6
">
<h3 class="
text-lg sm:text-xl
font-semibold
mb-2
">
{card.title}
</h3>
<p class="
text-sm sm:text-base
text-gray-600
line-clamp-3
">
{card.description}
</p>
</div>
</div>
))}
</div>
Responsive Navigation
<nav class="
bg-white
border-b border-gray-200
sticky top-0 z-50
">
<div class="
max-w-7xl mx-auto
px-4 sm:px-6 lg:px-8
">
<div class="
flex justify-between items-center
h-16 md:h-20
">
<!-- Logo -->
<div class="flex-shrink-0">
<img
src="/logo.svg"
alt="Logo"
class="h-8 md:h-10 w-auto"
/>
</div>
<!-- Desktop Navigation -->
<div class="
hidden md:flex
space-x-8
">
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2
text-sm lg:text-base
font-medium
">
Home
</a>
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2
text-sm lg:text-base
font-medium
">
About
</a>
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2
text-sm lg:text-base
font-medium
">
Services
</a>
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2
text-sm lg:text-base
font-medium
">
Contact
</a>
</div>
<!-- Mobile Menu Button -->
<button class="
md:hidden
p-2
rounded-md
text-gray-700 hover:bg-gray-100
">
<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>
<!-- Mobile Menu -->
<div class="md:hidden border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="
block px-3 py-2
rounded-md
text-base font-medium
text-gray-700 hover:bg-gray-100
">
Home
</a>
<a href="#" class="
block px-3 py-2
rounded-md
text-base font-medium
text-gray-700 hover:bg-gray-100
">
About
</a>
<a href="#" class="
block px-3 py-2
rounded-md
text-base font-medium
text-gray-700 hover:bg-gray-100
">
Services
</a>
<a href="#" class="
block px-3 py-2
rounded-md
text-base font-medium
text-gray-700 hover:bg-gray-100
">
Contact
</a>
</div>
</div>
</nav>
Advanced Patterns
Container Queries (Modern)
Use container queries for component-level responsiveness:
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/container-queries'),
],
}
<div class="@container">
<div class="
@sm:grid @sm:grid-cols-2
@lg:grid-cols-3
gap-4
">
<!-- Responsive to container, not viewport -->
</div>
</div>
Custom Breakpoints
Add project-specific breakpoints:
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '475px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1920px',
// Max-width breakpoints
'max-md': { 'max': '767px' },
// Height breakpoints
'tall': { 'raw': '(min-height: 800px)' },
},
},
}
Orientation-Based Styles
<div class="
portrait:flex-col
landscape:flex-row
">
Content that adapts to orientation
</div>
Print Styles
<div class="
text-base
print:text-xs
print:hidden
">
This is hidden in print
</div>
<div class="hidden print:block">
This only appears in print
</div>
Common Patterns
Responsive Image Sizes
<img
src="/image.jpg"
alt="Responsive image"
class="
w-full
h-auto
max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
mx-auto
"
/>
<!-- With aspect ratio -->
<div class="
aspect-square sm:aspect-video
w-full
overflow-hidden
">
<img
src="/image.jpg"
class="w-full h-full object-cover"
/>
</div>
Responsive Flexbox Direction
<div class="
flex
flex-col sm:flex-row
gap-4
items-center sm:items-start
justify-center sm:justify-between
">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Responsive Order
<div class="flex flex-col md:flex-row">
<div class="order-2 md:order-1">First on desktop, second on mobile</div>
<div class="order-1 md:order-2">Second on desktop, first on mobile</div>
</div>
Anti-Patterns
❌ Don't Use Too Many Breakpoints
<!-- Bad: Excessive breakpoints -->
<div class="
text-xs
sm:text-sm
md:text-base
lg:text-lg
xl:text-xl
2xl:text-2xl
">
<!-- Good: Strategic breakpoints -->
<div class="
text-sm
md:text-base
lg:text-lg
">
❌ Don't Forget Mobile Users
<!-- Bad: Desktop-only thinking -->
<div class="grid grid-cols-4 gap-2">
<!-- Good: Mobile-first -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
❌ Don't Use Arbitrary Breakpoints Everywhere
<!-- Bad: Too many custom breakpoints -->
<div class="min-[823px]:flex min-[1043px]:grid">
<!-- Good: Use standard breakpoints -->
<div class="md:flex lg:grid">
Related Skills
- tailwind-utility-classes: Using Tailwind's utility classes effectively
- tailwind-components: Building reusable component patterns
- tailwind-performance: Optimizing responsive designs for performance