tailwindcss-mobile-first

Tailwind 移动优先技能

此技能适用于 Tailwind CSS 移动优先响应式设计：断点策略、流体排版与间距、触控目标、容器查询、安全区域、响应式布局、媒体、导航和移动端性能。

何时使用此技能

当用户请求的任务符合前置内容中的触发条件时使用，尤其是涉及此领域的实现指导、调试、架构选择、生产环境加固或性能敏感决策。先从此编排器入手，然后加载与所需细节程度相匹配的参考文件。

核心工作流

1. 先使用无前缀工具类设定移动端基准，再逐步通过 sm:、md:、lg:、xl: 和 2xl: 增强。
2. 根据内容需求选择断点，而不是按设备名称选择；只有设计系统要求时，才覆盖 Tailwind v4 主题断点。
3. 使用 clamp() 实现流体排版和间距，使其在断点之间平滑缩放，同时通过 rem + vw 保持无障碍性。
4. 交互元素应适合触控，建议目标尺寸为 44px，并提供足够的间距、清晰的标签和移动端导航模式。
5. 对必须响应自身宽度而非视口宽度的可复用组件，使用容器查询。
6. 使用宽高比工具类预留媒体尺寸，并使用安全区域工具类适配带刘海的设备和固定式移动界面。

关键注意事项

• 无前缀的 Tailwind 类会应用于所有尺寸；带断点前缀的工具类会从该断点及以上尺寸开始应用。
• 按桌面优先的顺序排列类名并不会让设计变成桌面优先，但通常会模糊意图并增加错误。
• 仅依赖悬停的交互在触屏设备上会失效；应搭配聚焦、激活状态或显式控件。
• 未预留宽高比的视频和图像可能导致累积布局偏移。
• 固定在底部的导航必须考虑安全区域内边距，并增加内容内边距以避免重叠。

参考文件

• references/mobile-first-complete-guide.md - 完整的原始指南，涵盖设计理念、断点、流体排版与间距、触控目标、容器查询、布局、响应式图像与排版、导航、安全区域、移动端性能、测试和响应式视频模式。

回复指南

• 保留用户现有的框架、库和工具选择，除非有明确的兼容性或性能理由建议替代方案。
• 仅针对当前任务提供可直接复制粘贴的代码；否则请指向相关参考章节。
• 指出生产工作流中的权衡、故障模式和验证步骤。
• 优先选择无障碍、易维护、可衡量的解决方案，而不是巧妙的微优化。