60%+ of web traffic is mobile. If your site doesn't work on a phone, it doesn't work. Here's how to think about responsive design in 2026 — with Tailwind, which makes it easier than it's ever been.
The mental model
Don't design for desktop then shrink. Design for mobile then expand. In Tailwind: unprefixed classes = mobile. md: = 768px+. lg: = 1024px+. Start with stacked single-column, then add multi-column at wider breakpoints.
Common responsive patterns
- Stack → grid:
grid grid-cols-1 md:grid-cols-3 gap-6— single column on mobile, three on desktop. - Hidden on mobile:
hidden md:block— sidebar nav hidden on mobile, visible on desktop. - Font scaling:
text-3xl md:text-5xl— smaller headings on mobile, larger on desktop. - Padding scaling:
px-4 md:px-6 lg:px-8— tighter padding on smaller screens. - Full-width on mobile:
w-full md:w-auto— buttons fill mobile width, shrink on desktop.
Mistakes that break mobile
- Fixed widths.
w-[800px]overflows on any screen smaller than 800px. Usemax-w-instead. - Horizontal layouts without flex-wrap. Three items in a
flexrow withoutflex-wrapoverflow on mobile. Always add wrap or switch to grid. - Tiny tap targets. Buttons and links need at least 44×44px touch area on mobile.
py-3 px-6minimum. - Not testing on a real phone. Chrome DevTools responsive mode is approximate. Test on actual iOS and Android devices before shipping.
The AI advantage
AI app builders generate responsive Tailwind classes by default. Every InBuild-generated page uses mobile-first breakpoints, responsive grids, and properly sized touch targets. You get responsive design for free — then refine the edge cases visually.