Tailwind Responsive Design

Mobile-first responsive design is one of those things you think you understand until you're debugging why your nav looks fine on desktop but breaks on tablet. This gives you the Tailwind breakpoint system with real examples of hero sections, card grids, and navigation that actually work across devices. The examples show the full class strings with all the breakpoint prefixes, which is more helpful than you'd think when you're trying to remember whether to hide or block on md. Covers the basics well: typography scaling, spacing adjustments, show/hide patterns, and grid layouts that go from single column to four columns as the viewport expands.

skills.sh installs: 235
GitHub stars: 200
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thebushidocollective/han --skill tailwind-responsive-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS - Responsive Design

Tailwind CSS provides a mobile-first responsive design system using breakpoint prefixes that make it easy to build adaptive layouts.

Key Concepts

Mobile-First Approach

Tailwind uses a mobile-first breakpoint system. Unprefixed utilities apply to all screen sizes, and breakpoint prefixes apply from that breakpoint and up:

<!-- Mobile: full width, Tablet+: half width, Desktop+: third width -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Default Breakpoints

// tailwind.config.js default breakpoints
{
  sm: '640px',   // Small devices (landscape phones)
  md: '768px',   // Medium devices (tablets)
  lg: '1024px',  // Large devices (desktops)
  xl: '1280px',  // Extra large devices (large desktops)
  '2xl': '1536px' // 2X large devices (larger desktops)
}

Best Practices

1. Start Mobile, Scale Up

Design for mobile first, then add complexity for larger screens:

<!-- Good: Mobile-first approach -->
<div class="
  flex flex-col
  md:flex-row
  gap-4
">
  <div class="w-full md:w-1/2">Column 1</div>
  <div class="w-full md:w-1/2">Column 2</div>
</div>

SKILL.md on GitHub