name: tailwind-refactor description: Tailwind CSS 代码重构模式，用于 v4 迁移和反模式清理。此技能应用于重构 Tailwind 工具类、从 v3 迁移到 v4、清理废弃工具类、整合冗长类模式或移除代码异味 — 所有这些都不改变视觉输出。触发于涉及 Tailwind CSS 清理、v4 迁移、类重构、@apply 移除或工具现代化的任务。
社区 Tailwind CSS 重构最佳实践
针对 v4 的 Tailwind CSS 应用程序的全面代码质量重构指南。包含 8 个类别的 50 条规则，按迁移紧急程度优先排序。每个转换都保留现有的外观和感觉 — 此技能纯粹关于更干净的代码、现代语法和 v4 兼容性。
配套技能： 使用 tailwind-ui-refactor 进行视觉设计改进和 tailwind-responsive-ui 进行响应式布局模式。
何时应用
在手动迁移之前： 首先运行 npx @tailwindcss/upgrade — 它自动处理大多数配置和重命名工具更改。然后使用此技能处理自动工具未覆盖的模式。
在以下情况下参考这些指南：
- 将项目从 Tailwind CSS v3 迁移到 v4
- 清理废弃或重命名的工具类
- 整合冗长的多类模式
- 用设计令牌替换任意值
- 移除 CSS 文件中的
@apply过度使用 - 现代化语法到 v4 约定
按优先级分类的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 配置迁移 | 关键 | config- |
| 2 | 废弃工具替换 | 关键 | dep- |
| 3 | 重命名工具更新 | 高 | rename- |
| 4 | 类整合 | 高 | class- |
| 5 | 任意值清理 | 中高 | arb- |
| 6 | 语法现代化 | 中 | syntax- |
| 7 | @apply 和架构清理 | 中 | arch- |
| 8 | 现代功能采用 | 低中 | adopt- |
快速参考
1. 配置迁移（关键）
config-import-directive- 用 @import 替换 @tailwind 指令config-css-theme- 将 tailwind.config.js 迁移到 CSS @themeconfig-theme-function- 用 CSS 变量替换 theme() 函数config-theme-inline- 使用 @theme 内联用于非工具设计令牌config-utility-directive- 用 @utility 替换 @layer utilitiesconfig-postcss-plugin- 更新 PostCSS 插件到 @tailwindcss/postcssconfig-content-autodetect- 移除手动内容配置config-custom-variant- 将 addVariant 迁移到 @custom-variantconfig-preflight-defaults- 考虑 v4 中 Preflight 默认更改
2. 废弃工具替换（关键）
dep-opacity-modifiers- 用不透明度修饰符 (/50) 替换 -opacity-dep-flex-shorthand- 用 shrink/grow 替换 flex-shrink/flex-growdep-text-ellipsis- 用 text-ellipsis 替换 overflow-ellipsisdep-decoration-utilities- 用 box-decoration-* 替换 decoration-slice/clonedep-transform-composites- 用单个重置替换 transform-nonedep-transition-properties- 更新 transition-[transform] 到单个属性
3. 重命名工具更新（高）
rename-shadow-scale- 更新阴影工具到新比例rename-blur-scale- 更新模糊工具到新比例rename-rounded-scale- 更新边框半径工具到新比例rename-ring-width- 用 ring-3 替换 ring 用于 v3 默认rename-gradient-utilities- 用 bg-linear-* 替换 bg-gradient-*rename-outline-hidden- 用 outline-hidden 替换 outline-none
4. 类整合（高）
class-size-utility- 用 size-* 替换匹配的 w-* h-*class-gap-over-space- 在 flex/grid 中优先使用 gap-* 而不是 space-x/y-*class-inset-shorthand- 用 inset-* 替换 top/right/bottom/leftclass-border-color-explicit- 为 v4 默认更改添加显式边框颜色class-ring-color-explicit- 为 v4 默认更改添加显式环颜色class-redundant-display- 移除冗余显示类class-hidden-priority- 移除隐藏属性的显示覆盖class-container-utility- 用 @utility 替换容器插件配置
5. 任意值清理（中高）
arb-hex-to-theme- 用主题令牌替换任意十六进制颜色arb-spacing-to-scale- 用主题比例替换任意间距arb-dynamic-classes- 避免动态类名构造arb-breakpoint-to-theme- 用 @theme 替换任意断点arb-zindex-to-scale- 用定义的比例替换任意 z-index
6. 语法现代化（中）
syntax-css-variable-parens- 更新 CSS 变量语法从括号到圆括号syntax-variant-stacking- 更新变体堆叠到从左到右顺序syntax-important-modifier- 使用尾随 ! 用于重要修饰符syntax-grid-arbitrary- 在网格任意值中使用下划线syntax-gradient-preservation- 在变体中显式重置渐变停止syntax-hover-media-query- 考虑悬停变体媒体查询包装
7. @apply 和架构清理（中）
arch-apply-to-component- 将 @apply 块提取到框架组件中arch-layer-to-utility- 用 @utility 替换 @layer componentsarch-scoped-reference- 在作用域样式中使用 @reference 用于 @applyarch-safelist-to-source- 用 @source inline() 替换 safelistarch-domain-composition- 保留 Tailwind 用于原语，组合用于领域
8. 现代功能采用（低中）
adopt-container-queries- 使用容器查询而不是视口断点adopt-not-variant- 使用 not-* 变体用于否定条件adopt-in-variant- 使用 in-* 变体简化父状态样式adopt-field-sizing- 使用 field-sizing-content 用于自动调整大小的文本区域adopt-starting-variant- 使用 starting 变体用于无需 JS 的入口动画
如何使用
阅读单个参考文件以获取详细解释和代码示例：
参考文件
| 文件 | 描述 |
|---|---|
| references/_sections.md | 类别定义和排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本和参考信息 |