Apps That Work Everywhere

Over 50% of web traffic is mobile. Your app needs to work on phones, tablets, and desktops. Tailwind CSS makes this surprisingly easy.

Tailwind Breakpoints

sm:  640px   (small phones)
md:  768px   (tablets)
lg:  1024px  (laptops)
xl:  1280px  (desktops)
2xl: 1536px  (large screens)

The Pattern

Mobile-first: default styles for mobile, then add breakpoints for larger screens:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

1 column on mobile → 2 columns on tablet → 3 columns on desktop

Common Responsive Patterns

Stack → Grid

Cards stack vertically on mobile, become grid on desktop

Hamburger Menu

Full nav on desktop, collapsed menu on mobile

Font Scaling

Smaller text on mobile: text-lg md:text-xl lg:text-2xl

💡 Testing Tip

Use Chrome DevTools (F12 → device icon) to preview your app at different screen sizes. Test on your actual phone too!