--- name: tailwind-responsive-design user-invocable: false description: Use when building responsive layouts and mobile-first designs with Tailwind CSS. Covers breakpoints, container queries, and responsive utilities. allowed-tools: - Read - Write - Edit - Bash - Grep - Glob --- # 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: ```html
Responsive width
``` ### Default Breakpoints ```javascript // 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: ```html
Column 1
Column 2
``` ### 2. Use Responsive Typography Scale text appropriately across devices: ```html

Responsive Heading

Body text that scales

``` ### 3. Responsive Spacing Adjust padding and margins for different screens: ```html
``` ### 4. Grid Layouts Create responsive grids that adapt to screen size: ```html
Item 1
Item 2
Item 3
Item 4
``` ### 5. Show/Hide Elements Control visibility across breakpoints: ```html
Mobile only
``` ## Examples ### Responsive Hero Section ```html

Welcome to Our Site

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

Hero
``` ### Responsive Card Grid ```html
{cards.map(card => (
{card.title}

{card.title}

{card.description}

))}
``` ### Responsive Navigation ```html ``` ## Advanced Patterns ### Container Queries (Modern) Use container queries for component-level responsiveness: ```javascript // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/container-queries'), ], } ``` ```html
``` ### Custom Breakpoints Add project-specific breakpoints: ```javascript // 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 ```html
Content that adapts to orientation
``` ### Print Styles ```html
This is hidden in print
``` ## Common Patterns ### Responsive Image Sizes ```html Responsive image
``` ### Responsive Flexbox Direction ```html
Item 1
Item 2
Item 3
``` ### Responsive Order ```html
First on desktop, second on mobile
Second on desktop, first on mobile
``` ## Anti-Patterns ### ❌ Don't Use Too Many Breakpoints ```html
``` ### ❌ Don't Forget Mobile Users ```html
``` ### ❌ Don't Use Arbitrary Breakpoints Everywhere ```html
``` ## Related Skills - **tailwind-utility-classes**: Using Tailwind's utility classes effectively - **tailwind-components**: Building reusable component patterns - **tailwind-performance**: Optimizing responsive designs for performance