Responsive Design

Responsive design is the practice of building web interfaces that look good and function well on any screen size. Instead of creating separate mobile and desktop versions, you write one codebase that adapts its layout using CSS media queries and flexible units.

With Tailwind CSS, responsive design uses prefix modifiers: "sm:", "md:", "lg:", "xl:". For example, "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" creates a grid that shows 1 column on mobile, 2 on tablets, and 3 on desktop. The mobile-first approach means you write the mobile layout as the default and add breakpoints for larger screens.

For vibe coders, describing responsive behaviour to AI works well: "on mobile, stack the sidebar below the main content; on desktop, put it on the left at 240px wide." AI generates the responsive classes reliably because Tailwind's responsive system is consistent and well-documented.