Responsive System
Agent Workflow (MANDATORY)
Before implementation, use TeamCreate to spawn 3 agents:
-
fuse-ai-pilot:explore-codebase - Check existing breakpoints
-
fuse-ai-pilot:research-expert - Container queries support
After: Run fuse-ai-pilot:sniper for validation.
Overview
Name Width Tailwind Use Case
xs 0-479px default Mobile portrait
sm 480-719px sm:
Mobile landscape
md 720-919px md:
Tablet portrait
lg 920-1199px lg:
Tablet landscape
xl 1200px+ xl:
Desktop
Quick Reference
Mobile-First Pattern
<div className=" grid grid-cols-1 /* mobile: 1 column / sm:grid-cols-2 / sm: 2 columns / lg:grid-cols-3 / lg: 3 columns */ gap-4 sm:gap-6 lg:gap-8 ">
Container Queries
<div className="@container"> <div className="@md:flex @md:gap-4"> <div className="@md:w-1/2">Left</div> <div className="@md:w-1/2">Right</div> </div> </div>
Fluid Typography
.hero-title { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
Hide/Show Pattern
<div className="block sm:hidden">Mobile only</div> <div className="hidden lg:block">Desktop only</div>
Tailwind v4 Config
@theme { --breakpoint-sm: 480px; --breakpoint-md: 720px; --breakpoint-lg: 920px; --breakpoint-xl: 1200px; }
Validation Checklist
[ ] Mobile-first approach (start smallest) [ ] Container queries for complex layouts [ ] Fluid typography with clamp() [ ] Touch targets 44x44px on mobile [ ] No horizontal scroll on mobile
Best Practices
DO
-
Start mobile, enhance upward
-
Use container queries for components
-
Use clamp() for fluid sizing
-
Test on real devices
DON'T
-
Desktop-first (hard to maintain)
-
Fixed breakpoints for everything
-
Ignore touch targets
-
Skip mobile testing