tailwind-responsive

# Tailwind Responsive Skill

Patterns for responsive design with Tailwind CSS.

## Mobile-First Approach

### Breakpoint System

```html
<!-- Base styles apply to all sizes -->
<!-- Prefixed styles apply at that breakpoint and up -->

<div class="
  w-full      /* All sizes: full width */
  sm:w-1/2    /* 640px+: half width */
  md:w-1/3    /* 768px+: third width */
  lg:w-1/4    /* 1024px+: quarter width */
  xl:w-1/5    /* 1280px+: fifth width */
  2xl:w-1/6   /* 1536px+: sixth width */
">
  Responsive width
</div>
```

### Breakpoint Reference

```
sm:  640px   /* Small tablets, large phones */
md:  768px   /* Tablets */
lg:  1024px  /* Small laptops */
xl:  1280px  /* Desktops */
2xl: 1536px  /* Large desktops */
```

## Responsive Layouts

### Stacking to Row

```html
<!-- Stack on mobile, row on larger screens -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="flex-1">Item 3</div>
</div>
```

### Responsive Grid

```html
<!-- 1 column mobile, 2 tablet, 3 desktop, 4 large -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>
```

### Sidebar Layout

```html
<!-- Sidebar hidden on mobile, visible on desktop -->
<div class="flex">
  <aside class="hidden lg:block w-64 bg-gray-100">
    Sidebar
  </aside>
  <main class="flex-1 p-4">
    Main content
  </main>
</div>

<!-- Mobile: full width sidebar as overlay -->
<div class="relative">
  <aside class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl
                transform -translate-x-full lg:translate-x-0 lg:static
                transition-transform duration-300">
    Sidebar
  </aside>
  <main class="lg:ml-64">
    Main content
  </main>
</div>
```

## Responsive Typography

### Text Sizes

```html
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<p class="text