使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
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.
Key Gotchas
- Unprefixed Tailwind classes apply at every size; breakpoint-prefixed utilities apply at that breakpoint and above.
- Ordering classes desktop-first does not make the design desktop-first, but it often obscures intent and increases bugs.
- Hover-only interactions fail on touch devices; pair hover states with focus, active, or explicit controls.
- Videos and images without reserved aspect ratios can cause Cumulative Layout Shift.
- Fixed bottom navigation must account for safe-area insets and add content padding to avoid overlap.
Reference Map
- references/mobile-first-complete-guide.md - Full original guide covering philosophy, breakpoints, fluid type/spacing, touch targets, container queries, layouts, responsive images/type, navigation, safe areas, mobile performance, testing, and responsive video patterns.
Response Guidance
- Preserve the user's existing framework, library, and tooling choices unless there is a clear compatibility or performance reason to suggest an alternative.
- Give copy-pasteable code only for the exact task at hand; otherwise point to the relevant reference section.
- Call out tradeoffs, failure modes, and verification steps for production workflows.
- Prefer accessible, maintainable, measurable solutions over clever micro-optimizations.
