重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tailwind-refactor by pproenca/dot-skills
npx skills add https://github.com/pproenca/dot-skills --skill tailwind-refactor面向 v4 版本的 Tailwind CSS 应用程序综合代码质量重构指南。包含 8 个类别共 50 条规则,按迁移紧迫性排序。每次转换都保持现有的外观和感觉——此技能纯粹关乎更简洁的代码、现代语法和 v4 兼容性。
配套技能: 使用 tailwind-ui-refactor 进行视觉设计改进,使用 tailwind-responsive-ui 获取响应式布局模式。
在手动迁移之前: 首先运行 npx @tailwindcss/upgrade —— 它会自动处理大多数配置和重命名的工具类更改。然后使用此技能处理自动化工具未涵盖的模式。
在以下情况下参考这些指南:
@apply 的过度使用| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 配置迁移 |
| 关键 |
config- |
| 2 | 已弃用工具类替换 | 关键 | dep- |
| 3 | 重命名工具类更新 | 高 | rename- |
| 4 | 类合并 | 高 | class- |
| 5 | 任意值清理 | 中-高 | arb- |
| 6 | 语法现代化 | 中 | syntax- |
| 7 | @apply 与架构清理 | 中 | arch- |
| 8 | 现代特性采用 | 低-中 | adopt- |
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 默认值的变化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] 更新为单独的属性rename-shadow-scale - 将阴影工具类更新到新比例rename-blur-scale - 将模糊工具类更新到新比例rename-rounded-scale - 将边框半径工具类更新到新比例rename-ring-width - 将 v3 默认的 ring 替换为 ring-3rename-gradient-utilities - 用 bg-linear-* 替换 bg-gradient-*rename-outline-hidden - 用 outline-hidden 替换 outline-noneclass-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 - 移除针对 hidden 属性的显示覆盖class-container-utility - 用 @utility 替换容器插件配置arb-hex-to-theme - 用主题令牌替换任意十六进制颜色arb-spacing-to-scale - 用主题比例替换任意间距arb-dynamic-classes - 避免动态类名构造arb-breakpoint-to-theme - 用 @theme 替换任意断点arb-zindex-to-scale - 用已定义的比例替换任意 z-indexsyntax-css-variable-parens - 将 CSS 变量语法从方括号更新为圆括号syntax-variant-stacking - 将变体堆叠更新为从左到右的顺序syntax-important-modifier - 使用尾随的 ! 作为重要修饰符syntax-grid-arbitrary - 在网格任意值中使用下划线syntax-gradient-preservation - 在变体中显式重置渐变停止点syntax-hover-media-query - 考虑悬停变体的媒体查询包装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 保留用于原语,为领域进行组合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 | 版本和参考信息 |
每周安装次数
56
代码仓库
GitHub 星标数
86
首次出现
2026年2月13日
安全审计
安装于
codex53
github-copilot52
gemini-cli52
kimi-cli51
opencode51
amp50
Comprehensive code quality refactoring guide for Tailwind CSS applications targeting v4. Contains 50 rules across 8 categories, prioritized by migration urgency. Every transformation preserves the existing look and feel — this skill is purely about cleaner code, modern syntax, and v4 compatibility.
Companion skills: Use tailwind-ui-refactor for visual design improvements and tailwind-responsive-ui for responsive layout patterns.
Before manual migration: Run npx @tailwindcss/upgrade first — it handles most configuration and renamed utility changes automatically. Then use this skill for patterns the automated tool does not cover.
Reference these guidelines when:
@apply overuse in CSS files| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Configuration Migration | CRITICAL | config- |
| 2 | Deprecated Utility Replacement | CRITICAL | dep- |
| 3 | Renamed Utility Updates | HIGH | rename- |
| 4 | Class Consolidation | HIGH | class- |
| 5 | Arbitrary Value Cleanup | MEDIUM-HIGH | arb- |
| 6 | Syntax Modernization |
config-import-directive - Replace @tailwind directives with @importconfig-css-theme - Migrate tailwind.config.js to CSS @themeconfig-theme-function - Replace theme() function with CSS variablesconfig-theme-inline - Use @theme inline for non-utility design tokensconfig-utility-directive - Replace @layer utilities with @utilitydep-opacity-modifiers - Replace -opacity- with opacity modifiers (/50)dep-flex-shorthand - Replace flex-shrink/flex-grow with shrink/growdep-text-ellipsis - Replace overflow-ellipsis with text-ellipsisdep-decoration-utilities - Replace decoration-slice/clone with box-decoration-*dep-transform-composites - Replace transform-none with individual resetsrename-shadow-scale - Update shadow utilities to new scalerename-blur-scale - Update blur utilities to new scalerename-rounded-scale - Update border radius utilities to new scalerename-ring-width - Replace ring with ring-3 for v3 defaultrename-gradient-utilities - Replace bg-gradient-* with bg-linear-*class-size-utility - Replace matching w-* h-* with size-*class-gap-over-space - Prefer gap-* over space-x/y-* in flex/gridclass-inset-shorthand - Replace top/right/bottom/left with inset-*class-border-color-explicit - Add explicit border color for v4 default changeclass-ring-color-explicit - Add explicit ring color for v4 default changearb-hex-to-theme - Replace arbitrary hex colors with theme tokensarb-spacing-to-scale - Replace arbitrary spacing with theme scalearb-dynamic-classes - Avoid dynamic class name constructionarb-breakpoint-to-theme - Replace arbitrary breakpoints with @themearb-zindex-to-scale - Replace arbitrary z-index with defined scalesyntax-css-variable-parens - Update CSS variable syntax from brackets to parenthesessyntax-variant-stacking - Update variant stacking to left-to-right ordersyntax-important-modifier - Use trailing ! for important modifiersyntax-grid-arbitrary - Use underscores in grid arbitrary valuessyntax-gradient-preservation - Reset gradient stops explicitly in variantsarch-apply-to-component - Extract @apply blocks into framework componentsarch-layer-to-utility - Replace @layer components with @utilityarch-scoped-reference - Use @reference for @apply in scoped stylesarch-safelist-to-source - Replace safelist with @source inline()arch-domain-composition - Reserve Tailwind for primitives, compose for domainadopt-container-queries - Use container queries instead of viewport breakpointsadopt-not-variant - Use not-* variant for negated conditionsadopt-in-variant - Use in-* variant to simplify parent-state stylingadopt-field-sizing - Use field-sizing-content for auto-resizing textareasadopt-starting-variant - Use starting variant for entry animations without JSRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Weekly Installs
56
Repository
GitHub Stars
86
First Seen
Feb 13, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex53
github-copilot52
gemini-cli52
kimi-cli51
opencode51
amp50
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装
| MEDIUM |
syntax- |
| 7 | @apply & Architecture Cleanup | MEDIUM | arch- |
| 8 | Modern Feature Adoption | LOW-MEDIUM | adopt- |
config-postcss-pluginconfig-content-autodetect - Remove manual content configurationconfig-custom-variant - Migrate addVariant to @custom-variantconfig-preflight-defaults - Account for Preflight default changes in v4dep-transition-propertiesrename-outline-hiddenclass-redundant-displayclass-hidden-priority - Remove display overrides for hidden attributeclass-container-utility - Replace container plugin config with @utilitysyntax-hover-media-query