SKILL.md
Tailwind Mobile-First Skill
Use this skill for Tailwind CSS mobile-first responsive design: breakpoint strategy, fluid typography and spacing, touch targets, container queries, safe areas, responsive layouts, media, navigation, and mobile performance.
When to Use This Skill
Use when the user asks for tasks covered by the frontmatter triggers, especially implementation guidance, debugging, architecture choices, production hardening, or performance-sensitive decisions in this domain. Start from this orchestrator, then load the focused reference file that matches the requested detail level.
Core Workflow
- Start with unprefixed utilities for the mobile baseline, then progressively enhance with
sm:,md:,lg:,xl:, and2xl:. - Choose breakpoints from content needs rather than device names; override Tailwind v4 theme breakpoints only when the design system requires it.
- Use fluid typography and spacing with
clamp()for smoother scaling between breakpoints while preserving accessibility viarem + vw. - Make interactive elements touch-safe with 44px recommended targets, adequate spacing, clear labels, and mobile navigation patterns.
- Use container queries for reusable components that must respond to their own width instead of viewport width.
- Reserve media dimensions with aspect-ratio utilities and use safe-area utilities for notched devices and fixed mobile UI.