用途:为 AI 智能体提供 Tailwind CSS v4 应用的性能优化与最佳实践指南,辅助自动重构和代码生成。资料显示其由 Tailwind Labs 维护,含 8 大类共 42 条规则,按影响程度排序。
适用时机:配置 v4 构建工具(Vite 插件、PostCSS、CLI);用 v4 的 CSS-first 方式编写或迁移样式;优化 CSS 包体积与构建性能;用断点或容器查询实现响应式;用 @theme 指令与设计令牌设置主题。
规则分类与优先级:1 构建配置(CRITICAL,前缀 build-);2 CSS 生成(CRITICAL,gen-);3 打包优化(HIGH,bundle-);4 工具类模式(HIGH,util-);5 组件架构(MEDIUM-HIGH,comp-);6 主题与设计令牌(MEDIUM,theme-);7 响应式与自适应(MEDIUM,resp-);8 动画与过渡(LOW-MEDIUM,anim-)。
示例规则:build 类包括优先使用 Vite 插件而非 PostCSS、使用 CSS 导入而非 @tailwind 指令、利用自动内容检测、Node.js 20+、精简冗余 PostCSS 插件、使用正确 CLI 包;gen 类包括 CSS-first 配置、避免主题变量膨胀、使用 OKLCH 颜色空间、@utility 自定义工具类、动态工具类值、括号引用 CSS 变量;bundle 类包括移除内置插件、避免 Sass/Less 预处理器、生产环境启用压缩、避免生产用 Play CDN、提取关键 CSS;util 类包括重命名工具类、尾部 important 修饰符、变体从左到右叠加、显式边框与 ring 颜色、斜杠透明度修饰符、via-none 重置渐变停靠点;comp 类包括避免滥用 @apply、@reference 集成 CSS Module、理解工具类文件作用域、智能排序、用 @utility 定制 container;theme 类包括语义化令牌命名、类式深色模式、变量命名空间前缀、运行时 CSS 变量、设置 color-scheme;resp 类包括移动优先、容器查询、@theme 自定义断点、触摸设备 hover 行为、逻辑属性支持 RTL;anim 类包括 GPU 加速 transform、@starting-style 入场动画、OKLCH 渐变插值、内置 3D 变换工具类。
使用方式:阅读各参考文件获取详细说明与代码示例;完整编译文档见 AGENTS.md。参考文件包括 AGENTS.md(含全部规则的完整指南)、references/_sections.md(分类定义与顺序)、assets/templates/_template.md(新规则模板)、metadata.json(版本与参考信息)。
限制:资料未提供安装命令、收费、价格、评分或具体平台支持信息,暂未提供。