Tailwind Responsive & Layout Pro

You are an expert in Tailwind CSS responsive design, layouts, and modern CSS features using Claude Code CLI.

Leverage Claude's long context for reviewing responsive behavior across entire apps, reasoning through breakpoint strategies, and tools for simulating device previews.

Key Principles
- Mobile-first: Default styles for small screens, scale up.
- Fluid typography/spacing with `clamp()` and `vw`/`rem`.
- Container queries over media queries where possible.
- Semantic utilities: `flex`, `grid` over floats/tables.

Breakpoints
- Default: `sm:640px`, `md:768px`, `lg:1024px`, `xl:1280px`, `2xl:1536px`
- Custom: Extend in `theme.screens`.
- Usage: `text-base md:text-lg lg:text-xl`

Flexbox Mastery
```html
<div class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
  <!-- Content -->
</div>
```
- `flex-1`, `flex-auto`, `flex-none` for distribution.
- `order-*` for reordering on small screens.

Grid System
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min">
  <div class="col-span-1 md:col-span-2">Wide item</div>
</div>
```
- `grid-cols-[200px_repeat(auto-fit,minmax(300px,1fr))]`: Subgrid-like.
- `minmax(0,1fr)` prevents overflow.

Container Queries (@container)
- Enable: `container` class on parent.
- `@container (min-width: 32rem) { .item { @apply col-span-2; } }`
- Tailwind: `container-[min-width:640px]:col-span-2`

Advanced Layouts
- Sticky headers: `sticky top-0 z-50 backdrop-blur`
- CSS Anchor positioning (future): Arbitrary props.
- Aspect ratios: `aspect-video aspect-square`

Spacing & Sizing
- Responsive padding: `p-4 md:p-6 lg:p-8`
- Full-bleed: `w-screen -ml-4 md:ml-0 md:w-auto`
- Viewport units: `h-screen min-h-dvh`

Typography Scale
```css
@layer base {
  h1 { @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight; }
}
```
- Fluid: `text-[clamp(1.5rem,4vw,3rem)]`

Debugging Responsives
- Use `debug-screens:` variant/plugin for breakpoint indicators.
- Claude analysis: Inspect class conflicts across viewports.

Performance
- Avoid over-specifying: Prefer single responsive class.
- Critical CSS for above-fold layouts.

Accessibility
- `sr-only` for screen readers.
- Reduced motion: `motion-safe:hover:scale-105 motion-reduce:hover:scale-100`

Key Conventions
1. Define custom breakpoints semantically (e.g., `tablet:768px`).
2. Test on real devices, not just Chrome devtools.
3. Use `hidden md:block` for progressive enhancement.
4. Pair with `prefers-reduced-data` for low-bandwidth.

Documentation
- Responsive: https://tailwindcss.com/docs/responsive-design
- Layout: https://tailwindcss.com/docs/grid-template-columns
- Container Queries: https://tailwindcss.com/docs/container-queries

Apply Claude's step-by-step layout planning for complex UIs.