| name | mobile-responsiveness |
| description | Build responsive, mobile-first web applications with modern CSS and Tailwind CSS (2025/2026). Use this skill when implementing responsive layouts, touch interactions, mobile navigation, optimizing for various screen sizes, working with breakpoints, container queries, fluid typography, safe areas, or any mobile-first design work. Triggers on: responsive design, mobile-first, breakpoints, touch events, viewport, media queries, container queries, fluid spacing, mobile navigation, hamburger menu, bottom nav, safe area, notch handling.
|
Mobile-First Responsive Design (2025/2026)
Core Philosophy
Mobile-first design is the industry standard. With mobile traffic exceeding 60% globally and Google's mobile-first indexing, start with mobile and enhance upward.
<div class="text-sm md:text-base lg:text-lg">
Start small, enhance upward
</div>
Key Principle: Unprefixed utilities apply to ALL screen sizes. Breakpoint prefixes apply at that size AND ABOVE.
Breakpoint Strategy
Tailwind Default Breakpoints
| Prefix | Min-width | Target Devices |
|---|
| (none) | 0px | All mobile phones (base) |
sm: | 640px | Large phones, small tablets |
md: | 768px | Tablets (portrait) |
lg: | 1024px | Tablets (landscape), laptops |
xl: | 1280px | Desktops |
2xl: | 1536px | Large desktops |
Content-Driven Breakpoints
Let content determine breakpoints, not device dimensions:
@theme {
--breakpoint-sm: 36rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 62rem;
--breakpoint-xl: 75rem;
--breakpoint-2xl: 90rem;
--breakpoint-xs: 20rem;
--breakpoint-3xl: 120rem;
}
Screen Coverage
<div class="px-4">Mobile base</div>
<div class="px-4 md:px-6">Tablet</div>
<div class="px-4 md:px-6 lg:px-8">Desktop</div>
<div class="px-4 md:px-6 lg:px-8 xl:px-12">Wide desktop</div>
Mobile-First Breakpoints (CSS)
.container { padding: 1rem; }
@media (min-width: 768px) {
.container { padding: 2rem; }
}
@media (min-width: 1024px) {
.container { padding: 3rem; max-width: 1200px; margin: 0 auto; }
}
@media (min-width: 1280px) {
.container { max-width: 1400px; }
}
Fluid Typography System
Eliminates jarring size jumps between breakpoints:
@theme {
--text-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
--text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
--text-fluid-2xl: clamp(1.5rem, 1.1rem + 2vw, 2rem);
--text-fluid-3xl: clamp(1.875rem, 1.2rem + 3.375vw, 2.5rem);
--text-fluid-4xl: clamp(2.25rem, 1rem + 6.25vw, 3.5rem);
--text-fluid-5xl: clamp(3rem, 1rem + 10vw, 5rem);
}
Always combine vw with rem to respect user zoom preferences (WCAG).
CSS Variables Approach
:root {
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
body { font-size: var(--font-size-base); }
h1 { font-size: var(--font-size-h1); }
Heading Hierarchy
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight tracking-tight">
Main Heading
</h1>
<h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold leading-snug">
Section Heading
</h2>
Readable Body Text
<article class="max-w-prose mx-auto">
<p class="text-base md:text-lg leading-relaxed md:leading-loose text-gray-700">
Body text optimized for readability with 45-75 characters per line.
</p>
</article>
<h2 class="text-balance text-2xl md:text-3xl font-bold max-w-2xl">
Heading with balanced line breaks
</h2>
Fluid Spacing System
@theme {
--spacing-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
--spacing-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
--spacing-fluid-md: clamp(1rem, 0.75rem + 1.25vw, 2rem);
--spacing-fluid-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
--spacing-fluid-xl: clamp(2rem, 1.25rem + 3.75vw, 4rem);
--spacing-fluid-2xl: clamp(3rem, 1.5rem + 7.5vw, 6rem);
--spacing-fluid-section: clamp(4rem, 2rem + 10vw, 8rem);
}
<section class="py-fluid-section px-fluid-md">
<div class="max-w-7xl mx-auto">
<h2 class="mb-fluid-lg">Section Title</h2>
<div class="grid gap-fluid-md grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
</div>
</div>
</section>
Touch-Friendly Interactive Elements
WCAG 2.2 Touch Target Requirements
- WCAG 2.2 Level AA: 24x24 CSS pixels minimum
- Recommended: 44x44 CSS pixels
- Optimal: 48x48 CSS pixels for critical actions
<button class="min-h-11 min-w-11 p-2.5">
<svg class="h-6 w-6">...</svg>
<span class="sr-only">Action</span>
</button>
<button class="min-h-12 min-w-12 px-6 py-3 text-base">
Primary Action
</button>
Extended Touch Targets
<a href="/link" class="relative inline-block text-sm">
Small visible link
<span class="absolute -inset-3" aria-hidden="true"></span>
</a>
Touch Target Spacing
<nav class="flex gap-3">
<a href="#" class="min-h-11 px-4 py-2.5">Home</a>
<a href="#" class="min-h-11 px-4 py-2.5">About</a>
<a href="#" class="min-h-11 px-4 py-2.5">Contact</a>
</nav>
Touch Interactions (React)
import { useState } from 'react';
function SwipeableCard({ onSwipeLeft, onSwipeRight, children }) {
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
const minSwipeDistance = 50;
const onTouchStart = (e: React.TouchEvent) => {
setTouchEnd(null);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: React.TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
if (distance > minSwipeDistance) onSwipeLeft?.();
if (distance < -minSwipeDistance) onSwipeRight?.();
};
return (
<div onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}>
{children}
</div>
);
}
Container Queries (2025 Game-Changer)
Component-level responsiveness, independent of viewport size.
@import "tailwindcss";
@plugin "@tailwindcss/container-queries";
| Class | Min-width |
|---|
@xs | 320px |
@sm | 384px |
@md | 448px |
@lg | 512px |
@xl | 576px |
@2xl | 672px |
@3xl | 768px |
<article class="@container">
<div class="flex flex-col @sm:flex-row gap-4 p-4 bg-white rounded-xl shadow-sm">
<img src="..." class="w-full @sm:w-32 @lg:w-48 aspect-video @sm:aspect-square object-cover rounded-lg" />
<div class="flex-1 min-w-0">
<h3 class="text-base @md:text-lg @lg:text-xl font-semibold truncate">Card Title</h3>
<p class="text-sm @md:text-base text-gray-600 line-clamp-2 @lg:line-clamp-3 mt-2">
Description adapts to container...
</p>
</div>
</div>
</article>
When to Use Container vs Viewport Queries
| Container Queries | Viewport Queries |
|---|
| Reusable components | Page-level layouts |
| Sidebar widgets | Navigation bars |
| Card grids | Hero sections |
| Embedded content | Full-width sections |
Responsive Layout Patterns
Auto-Responsive Grids
<div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
</div>
Stack to Row
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1">Content 1</div>
<div class="flex-1">Content 2</div>
</div>
Collapsible Sidebar
<div class="flex min-h-screen">
<aside class="hidden lg:flex lg:flex-col w-64 border-r bg-gray-50">
<nav class="flex-1 p-4">...</nav>
</aside>
<main class="flex-1 p-4 lg:p-8">Content</main>
</div>
Holy Grail Layout
<div class="min-h-screen grid grid-rows-[auto_1fr_auto]">
<header class="sticky top-0 z-50 h-16 bg-white border-b shadow-sm">
<nav class="h-full max-w-7xl mx-auto px-4 flex items-center justify-between">
<Logo />
<ul class="hidden md:flex gap-6">...</ul>
<button class="md:hidden min-h-11 min-w-11">Menu</button>
</nav>
</header>
<div class="grid grid-cols-1 md:grid-cols-[240px_1fr] lg:grid-cols-[240px_1fr_280px] gap-0">
<nav class="hidden md:block border-r p-4">Left Nav</nav>
<main class="p-4 md:p-6 lg:p-8">Main Content</main>
<aside class="hidden lg:block border-l p-4">Right Sidebar</aside>
</div>
<footer class="bg-gray-900 text-white py-8 md:py-12">Footer</footer>
</div>
Mobile Navigation Patterns
Hamburger to Full Nav
function MobileNav() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen} aria-label="Toggle menu">
<span className={`hamburger ${isOpen ? 'open' : ''}`} />
</button>
<nav className={`
fixed inset-0 bg-white z-50 transform transition-transform
${isOpen ? 'translate-x-0' : '-translate-x-full'}
md:static md:translate-x-0 md:bg-transparent
`}>
<ul className="flex flex-col md:flex-row gap-4 p-4 md:p-0">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
{isOpen && (
<div className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setIsOpen(false)} />
)}
</>
);
}
Bottom Navigation (Mobile App Style)
<nav class="fixed bottom-0 inset-x-0 z-50 md:hidden bg-white border-t shadow-lg safe-area-pb">
<ul class="flex justify-around">
<li>
<a href="#" class="flex flex-col items-center min-h-14 min-w-14 px-3 py-2 text-xs">
<svg class="h-6 w-6 mb-1">...</svg>
Home
</a>
</li>
</ul>
</nav>
<main class="pb-20 md:pb-0">Content</main>
Safe Area Handling (Notched Devices)
@utility safe-area-pt { padding-top: env(safe-area-inset-top); }
@utility safe-area-pb { padding-bottom: env(safe-area-inset-bottom); }
@utility safe-area-pl { padding-left: env(safe-area-inset-left); }
@utility safe-area-pr { padding-right: env(safe-area-inset-right); }
@utility safe-area-p {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0; right: 0;
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Responsive Images
<div class="aspect-video overflow-hidden rounded-lg">
<img src="..." class="w-full h-full object-cover" loading="lazy" />
</div>
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg" />
<source media="(min-width: 640px)" srcset="medium.jpg" />
<img src="small.jpg" alt="Description" class="w-full h-auto rounded-lg" loading="lazy" />
</picture>
<img src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(min-width: 1280px) 1200px, (min-width: 768px) 80vw, 100vw"
alt="Responsive image" class="w-full h-auto" loading="lazy" />
useMediaQuery Hook
import { useState, useEffect } from 'react';
function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
setMatches(media.matches);
const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [query]);
return matches;
}
function Component() {
const isMobile = useMediaQuery('(max-width: 767px)');
const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
const isDesktop = useMediaQuery('(min-width: 1024px)');
return isMobile ? <MobileView /> : <DesktopView />;
}
Performance for Mobile
<img src="image.jpg" alt="..." loading="lazy" class="w-full h-auto" />
@utility content-auto {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
Responsive Testing Checklist
- 320px — Smallest supported width
- 375px — Modern iPhone base
- 414px — Large phones
- 768px — iPad portrait
- 1024px — iPad landscape / small laptop
- 1280px — Standard laptop
- 1440px — Large desktop
- 1920px — Full HD desktop
Quality Checks
Best Practices Summary
| Practice | Implementation |
|---|
| Mobile-first utilities | Unprefixed first, then sm:, md:, lg: |
| Touch targets | min-h-11 min-w-11 (44px minimum) |
| Fluid typography | clamp(min, preferred, max) with rem + vw |
| Container queries | @container for component responsiveness |
| Safe areas | env(safe-area-inset-*) for notched devices |
| Readable text | max-w-prose (65ch) and leading-relaxed |
| Lazy loading | loading="lazy" on below-fold images |
| Touch spacing | gap-3 (12px) minimum between targets |
| Viewport meta | width=device-width, initial-scale=1 |
Resources
