tailwindcss-mobile-first 是做什么的?
使用 Tailwind CSS v4(2025-2026)实现移动优先的响应式设计模式。主动激活场景:
- 移动优先设计,使用 Tailwind 断点(sm:、md:、lg:、xl:、2xl:)
- 响应式工具类排序(默认 = 移动端,然后断点)
- 响应式排版(text-base sm:text-lg lg:text-xl)
- 响应式网格与弹性布局
- 跨断点隐藏/显示(hidden md:block)
- 使用
max-*断点实现桌面端降级覆盖 - 容器查询(
@container)用于组件级响应 - 安全区域(safe-area)适配与刘海屏处理
- 横屏与竖屏方向适配
- 触摸与悬停交互(hover: 配合 @media)
提供:断点参考、移动优先模式、容器查询示例、安全区域实现方案、触摸/悬停处理。