用途:为 Tailwind CSS 项目提供代码质量重构指南,目标为 v4 迁移与清理过时写法,只改善代码整洁度、现代语法与 v4 兼容性,保持原有视觉不变。
主要能力:包含 50 条规则,按 8 个类别和优先级组织:配置迁移(config-,关键)、废弃工具类替换(dep-,关键)、重命名工具类更新(rename-,高)、类名合并(class-,高)、任意值清理(arb-,中高)、语法现代化(syntax-,中)、@apply 与架构清理(arch-,中)、现代特性采用(adopt-,中低)。涉及把 @tailwind 指令换为 @import、tailwind.config.js 迁移到 CSS @theme、theme() 换为 CSS 变量、@layer utilities 换为 @utility、PostCSS 插件改为 @tailwindcss/postcss、移除手动 content 配置、addVariant 迁移到 @custom-variant;替换 -opacity- 为 /50 修饰符、flex-shrink/flex-grow 为 shrink/grow、overflow-ellipsis 为 text-ellipsis;更新 shadow、blur、rounded 尺度、ring 为 ring-3、bg-gradient-* 为 bg-linear-、outline-none 为 outline-hidden;用 size- 替代同宽高、flex/grid 中优先 gap-、inset- 简写等;任意十六进制颜色、任意间距、任意断点替换为主题令牌;变体叠加顺序、important 后缀 !、悬停媒体查询等语法更新;@apply 抽取为组件、@reference 用于作用域样式、@source inline() 替代 safelist;以及采用容器查询、not-、in-、field-sizing-content、starting 变体等。
使用方式:手动迁移前先运行 npx @tailwindcss/upgrade,它自动处理大部分配置和重命名,再用本技能覆盖自动化未涉及的模式;详细说明和代码示例见 references/_sections.md 与 assets/templates/_template.md。配套技能:tailwind-ui-refactor 用于视觉设计改进,tailwind-responsive-ui 用于响应式布局。
限制:资料未提供具体版本号、安装方式、收费模式与作者许可信息。