Home›Tailwind CSS in 5 Days›Day 2
Day 2 of 5
⏱ ~60 minutes
Tailwind CSS in 5 Days — Day 2

Responsive Design

Tailwind is mobile-first. Start with mobile styles, then add breakpoint prefixes to override for larger screens. This lesson covers the breakpoint system and common responsive patterns.

Breakpoint Prefixes

Add a breakpoint prefix before any utility to apply it at that screen size and above. No breakpoint = applies to all sizes (mobile first).

Breakpoints
sm:   640px+
md:   768px+
lg:   1024px+
xl:   1280px+
2xl:  1536px+
Mobile-first pattern




  
Main content

  
Sidebar






Big Heading









  
Card
💡
Always design mobile first. Start without a prefix. Then add md: or lg: to adjust for larger screens. Adding breakpoints to 'undo' mobile styles is a sign you started desktop-first.

Common Responsive Patterns

Responsive navbar
Card grid

  

    

      
Card Title

      
Description text here.
📝 Day 2 Exercise
Build a Responsive Dashboard
  1. Build a full-page layout: sticky navbar, sidebar that collapses on mobile, main content area.
  2. The sidebar should be hidden on mobile and visible on lg: screens.
  3. Build a stats row: 1 column on mobile, 2 on sm, 4 on lg.
  4. Build a data table that's scrollable horizontally on mobile (overflow-x-auto).
  5. Test by resizing the browser window through all breakpoints.

Day 2 Summary

  • Tailwind is mobile-first: no prefix = all sizes, sm: = 640px+, md: = 768px+.
  • Pattern: set mobile styles first, then add md:/lg: to scale up.
  • hidden md:flex = hidden on mobile, flex on desktop. flex md:hidden = opposite.
  • grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 — responsive grid in one line.
→
← Previous
Day 1: Utility Classes and Layout
Next →
Day 3: Components and Reuse
→
Finished this lesson?