TailwindCSSv4性能优化最佳实践Skill tailwind

---

名称: tailwind 描述: Tailwind CSS v4性能优化和最佳实践指南（原名tailwindcss-v4-style）。此技能应用于编写、审查或重构Tailwind CSS v4代码时，以确保最佳构建性能、最小CSS输出和正确使用v4特性。在涉及Tailwind配置、@theme指令、工具类、响应式设计、深色模式、容器查询或CSS生成优化的任务中触发。

社区Tailwind CSS v4最佳实践

Tailwind CSS v4应用的全面性能优化指南。包含44条规则，分为8个类别，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

在以下情况下参考这些指南：

• 配置Tailwind CSS v4构建工具（Vite插件、PostCSS、CLI）
• 使用v4的CSS优先方法编写或迁移样式
• 优化CSS包大小和构建性能
• 使用断点或容器查询实现响应式设计
• 使用@theme指令和设计令牌设置主题

规则类别按优先级

优先级	类别	影响	前缀
1	构建配置	关键	build-
2	CSS生成	关键	gen-
3	包优化	高	bundle-
4	工具模式	高	util-
5	组件架构	中高	comp-
6	主题与设计令牌	中	theme-
7	响应式与自适应	中	resp-
8	动画与过渡	低中	anim-

快速参考

1. 构建配置（关键）

• build-vite-plugin - 使用Vite插件而非PostCSS
• build-css-import - 使用CSS导入而非@tailwind指令
• build-content-detection - 利用自动内容检测
• build-node-version - 使用Node.js 20+以获得最佳性能
• build-postcss-simplify - 移除冗余PostCSS插件
• build-cli-package - 使用正确的CLI包

2. CSS生成（关键）

• gen-css-first-config - 使用CSS优先配置而非JavaScript
• gen-avoid-theme-bloat - 避免过多的主题变量
• gen-oklch-colors - 使用OKLCH颜色空间以获得鲜艳颜色
• gen-utility-directive - 使用@utility自定义工具类
• gen-dynamic-utilities - 使用动态工具类值
• gen-css-variable-syntax - 使用括号引用CSS变量

3. 包优化（高）

• bundle-remove-unused-plugins - 移除未使用的内置插件
• bundle-avoid-preprocessors - 避免Sass/Less预处理器
• bundle-css-minification - 在生产环境中启用CSS压缩
• bundle-avoid-cdn-production - 避免在生产中使用Play CDN
• bundle-split-critical-css - 提取关键CSS以改善初始渲染

4. 工具模式（高）

• util-renamed-utilities - 使用重命名的工具类
• util-important-modifier - 使用尾部重要修饰符
• util-variant-stacking - 使用从左到右的变体堆叠
• util-explicit-colors - 使用明确的边框和环颜色
• util-opacity-modifier - 使用斜杠不透明度修饰符
• util-gradient-via-none - 使用via-none重置渐变停止点

5. 组件架构（中高）

• comp-avoid-apply-overuse - 避免过度使用@apply
• comp-reference-directive - 使用@reference进行CSS模块集成
• comp-utility-file-scope - 理解工具类文件范围
• comp-smart-sorting - 利用智能工具类排序
• comp-container-customize - 使用@utility自定义容器
• comp-custom-variant - 使用@custom-variant定义自定义变体

6. 主题与设计令牌（中）

• theme-semantic-tokens - 使用语义设计令牌名称
• theme-dark-mode-class - 使用基于类的深色模式以控制
• theme-prefix-variables - 使用前缀进行变量命名空间
• theme-runtime-variables - 利用运行时CSS变量
• theme-color-scheme - 设置color-scheme以支持原生深色模式
• theme-inline-static - 使用@theme inline和@theme static控制变量

7. 响应式与自适应（中）

• resp-mobile-first - 使用移动优先响应式设计
• resp-container-queries - 使用容器查询实现组件级响应性
• resp-custom-breakpoints - 在@theme中定义自定义断点
• resp-hover-capability - 将悬停与活动配对以实现触摸友好交互
• resp-logical-properties - 使用逻辑属性以支持RTL

8. 动画与过渡（低中）

• anim-gpu-accelerated - 使用GPU加速的变换属性
• anim-starting-style - 使用@starting-style进行入口动画
• anim-gradient-interpolation - 使用OKLCH渐变插值
• anim-3d-transforms - 使用内置的3D变换工具类

如何使用

阅读单个参考文件以获取详细解释和代码示例：

• 部分定义 - 类别结构和影响级别
• 规则模板 - 添加新规则的模板

完整编译文档

有关所有规则扩展的完整指南，请参见AGENTS.md。

参考文件

文件	描述
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则的模板
metadata.json	版本和参考信息