用途
Tailwind 是 Tailwind Labs 维护的 Tailwind CSS v4 最佳实践技能，用于在编写、迁移和优化 Tailwind CSS v4 样式时提供规则化指导。它包含 42 条规则，分布在 8 个类别中，并按影响程度划分优先级，可用于指导自动化重构与代码生成。
主要能力
规则按优先级分为 8 类：
- 构建配置（CRITICAL，前缀 build-）：如优先使用 Vite 插件而非 PostCSS、使用 CSS 导入替代 @tailwind 指令、利用自动内容检测、升级工具需 Node.js 20+、移除冗余 PostCSS 插件、使用正确的 CLI 包。
- CSS 生成（CRITICAL，前缀 gen-）：如使用 CSS-first 配置替代 JavaScript、避免主题变量膨胀、使用 OKLCH 色彩空间、使用 @utility 定义自定义工具类、使用动态工具值、CSS 变量引用使用括号语法。
- 打包优化（HIGH，前缀 bundle-）：如移除内置插件、避免 Sass/Less 预处理器、生产环境启用 CSS 压缩、生产环境避免 Play CDN、提取关键 CSS。
- 工具类模式（HIGH，前缀 util-）：如使用重命名后的工具类、使用尾部 important 修饰符、从左到右堆叠变体、显式指定边框与 ring 颜色、使用斜杠透明度修饰符、用 via-none 重置渐变停靠点。
- 组件架构（MEDIUM-HIGH，前缀 comp-）：如避免过度使用 @apply、使用 @reference 集成 CSS Module、理解工具文件作用域、利用智能工具排序、用 @utility 自定义容器。
- 主题与设计令牌（MEDIUM，前缀 theme-）：如使用语义化设计令牌命名、使用基于 class 的暗色模式、使用前缀进行变量命名空间隔离、利用运行时 CSS 变量、设置 color-scheme 以支持原生暗色模式。
- 响应式与自适应（MEDIUM，前缀 resp-）：如移动优先响应式设计、使用容器查询实现组件级响应式、在 @theme 中定义自定义断点、理解触屏设备上的 hover 行为、使用逻辑属性支持 RTL。
- 动画与过渡（LOW-MEDIUM，前缀 anim-）：如使用 GPU 加速的 transform 属性、使用 @starting-style 实现入场动画、使用 OKLCH 渐变插值、使用内置 3D transform 工具类。
使用方式
在项目根目录运行：
npx -y @pymodel/react-frontend-skills detect # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill tailwind # deprecated APIs → rule IDs
对于上述每条与任务匹配的规则以及每个扫描命中项，阅读 references/<rule-id>.md，了解其重要性以及错误与正确代码对比。
适用场景
- 配置 Tailwind CSS v4 构建工具（Vite 插件、PostCSS、CLI）
- 使用 v4 的 CSS-first 方式编写或迁移样式
- 优化 CSS 打包体积与构建性能
- 使用断点或容器查询实现响应式设计
- 通过 @theme 指令和设计令牌设置主题
限制
资料未提供该技能的收费、价格、平台支持范围或具体效果数据，暂未提供相关信息。