tailwindcss-mobile-first

SKILL.md

Mobile-first responsive design patterns with 2025/2026 best practices for Tailwind CSS v4.

Covers six breakpoint strategy, fluid typography and spacing using CSS clamp, and container queries for component-level responsiveness independent of viewport size

Includes WCAG 2.2 compliant touch targets (44–48px minimum), safe area handling for notched devices, and practical layout patterns for grids, flexbox, and sidebars

Provides mobile navigation patterns, responsive image and video techniques with aspect ratio containers to prevent layout shift, and performance optimization strategies

Details responsive typography hierarchy, lazy loading, content visibility, and a comprehensive testing checklist covering 320px to 1920px viewports

name: tailwindcss-mobile-first
description: Mobile-first responsive design patterns with Tailwind CSS v4 (2025-2026). PROACTIVELY activate for: (1) mobile-first design with Tailwind breakpoints (sm:, md:, lg:, xl:, 2xl:), (2) responsive utility ordering (default = mobile, then breakpoints), (3) responsive typography (text-base sm:text-lg lg:text-xl), (4) responsive grids and flexbox, (5) hide/show across breakpoints (hidden md:block), (6) max-* breakpoints for desktop-down overrides, (7) container queries (@container) for component-level responsiveness, (8) safe-area insets and notch handling, (9) landscape vs portrait orientation, (10) touch vs hover (hover: with @media). Provides: breakpoint reference, mobile-first patterns, container-query examples, safe-area recipes, and touch/hover handling.

Mobile-First Responsive Design (2025/2026)

Core Philosophy

Mobile-first design is the industry standard for 2025/2026. With mobile traffic consistently exceeding 60% of global web traffic and Google's mobile-first indexing, starting with mobile ensures optimal user experience and SEO performance.

The Mobile-First Mindset

<!-- CORRECT: Mobile-first (progressive enhancement) -->
<div class="text-sm md:text-base lg:text-lg">
  Start small, enhance upward
</div>