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:

Responsive width

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:

Column 1

Column 2

2. Use Responsive Typography Scale text appropriately across devices:

Responsive Heading

Body text that scales

3. Responsive Spacing Adjust padding and margins for different screens:

4. Grid Layouts Create responsive grids that adapt to screen size:

Item 1

Item 2

Item 3

Item 4

5. Show/Hide Elements Control visibility across breakpoints:

Mobile only

Desktop only

Examples Responsive Hero Section

Welcome to Our Site

This is a responsive hero section that adapts to all screen sizes.

Responsive Card Grid

{cards.map(card => (

{card.title}

{card.description}

))}

Responsive Navigation Advanced Patterns Container Queries (Modern) Use container queries for component-level responsiveness: // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/container-queries'), ], }

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

Content that adapts to orientation

Print Styles

This is hidden in print

Common Patterns Responsive Image Sizes

Responsive Flexbox Direction

Item 1

Item 2

Item 3

Responsive Order

First on desktop, second on mobile

Second on desktop, first on mobile

Anti-Patterns ❌ Don't Use Too Many Breakpoints

❌ Don't Forget Mobile Users

❌ Don't Use Arbitrary Breakpoints Everywhere

Related Skills tailwind-utility-classes: Using Tailwind's utility classes effectively tailwind-components: Building reusable component patterns tailwind-performance: Optimizing responsive designs for performance

tailwind-responsive-design

安装

Responsive Heading

Welcome to Our Site

{card.title}