[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEJGQMM3Z4WMFAE2RN2D9E":3,"skill-same:01M6FEJGQMM3Z4WMFAE2RN2D9E":53},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6FEJGQMM3Z4WMFAE2RN2D9E","tailwind-refactor",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Ftailwind-refactor\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查","SCENARIO","使用场景",[23,24,25],"refactor","Tailwind","tailwind refactor","2026-11-10 10:12:30",false,"# Community Tailwind CSS Refactoring Best Practices\n\nComprehensive 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.\n\n**Companion skills:** Use [tailwind-ui-refactor](..\u002Ftailwind-ui-refactor\u002F) for visual design improvements and [tailwind-responsive-ui](..\u002Ftailwind-responsive-ui\u002F) for responsive layout patterns.\n\n## When to Apply\n\n**Before manual migration:** Run `npx @tailwindcss\u002Fupgrade` first — it handles most configuration and renamed utility changes automatically. Then use this skill for patterns the automated tool does not cover.\n\nReference these guidelines when:\n- Migrating a project from Tailwind CSS v3 to v4\n- Cleaning up deprecated or renamed utility classes\n- Consolidating verbose multi-class patterns\n- Replacing arbitrary values with design tokens\n- Removing `@apply` overuse in CSS files\n- Modernizing syntax to v4 conventions\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Configuration Migration | CRITICAL | `config-` |\n| 2 | Deprecated Utility Replacement | CRITICAL | `dep-` |\n| 3 | Renamed Utility Updates | HIGH | `rename-` |\n| 4 | Class Consolidation | HIGH | `class-` |\n| 5 | Arbitrary Value Cleanup | MEDIUM-HIGH | `arb-` |\n| 6 | Syntax Modernization | MEDIUM | `syntax-` |\n| 7 | @apply & Architecture Cleanup | MEDIUM | `arch-` |\n| 8 | Modern Feature Adoption | LOW-MEDIUM | `adopt-` |\n\n## Quick Reference\n\n### 1. Configuration Migration (CRITICAL)\n\n- [`config-import-directive`](references\u002Fconfig-import-directive.md) - Replace @tailwind directives with @import\n- [`config-css-theme`](references\u002Fconfig-css-theme.md) - Migrate tailwind.config.js to CSS @theme\n- [`config-theme-function`](references\u002Fconfig-theme-function.md) - Replace theme() function with CSS variables\n- [`config-theme-inline`](references\u002Fconfig-theme-inline.md) - Use @theme inline for non-utility design tokens\n- [`config-utility-directive`](references\u002Fconfig-utility-directive.md) - Replace @layer utilities with @utility\n- [`config-postcss-plugin`](references\u002Fconfig-postcss-plugin.md) - Update PostCSS plugin to @tailwindcss\u002Fpostcss\n- [`config-content-autodetect`](references\u002Fconfig-content-autodetect.md) - Remove manual content configuration\n- [`config-custom-variant`](references\u002Fconfig-custom-variant.md) - Migrate addVariant to @custom-variant\n- [`config-preflight-defaults`](references\u002Fconfig-preflight-defaults.md) - Account for Preflight default changes in v4\n\n### 2. Deprecated Utility Replacement (CRITICAL)\n\n- [`dep-opacity-modifiers`](references\u002Fdep-opacity-modifiers.md) - Replace *-opacity-* with opacity modifiers (\u002F50)\n- [`dep-flex-shorthand`](references\u002Fdep-flex-shorthand.md) - Replace flex-shrink\u002Fflex-grow with shrink\u002Fgrow\n- [`dep-text-ellipsis`](references\u002Fdep-text-ellipsis.md) - Replace overflow-ellipsis with text-ellipsis\n- [`dep-decoration-utilities`](references\u002Fdep-decoration-utilities.md) - Replace decoration-slice\u002Fclone with box-decoration-*\n- [`dep-transform-composites`](references\u002Fdep-transform-composites.md) - Replace transform-none with individual resets\n- [`dep-transition-properties`](references\u002Fdep-transition-properties.md) - Update transition-[transform] to individual properties\n\n### 3. Renamed Utility Updates (HIGH)\n\n- [`rename-shadow-scale`](references\u002Frename-shadow-scale.md) - Update shadow utilities to new scale\n- [`rename-blur-scale`](references\u002Frename-blur-scale.md) - Update blur utilities to new scale\n- [`rename-rounded-scale`](references\u002Frename-rounded-scale.md) - Update border radius utilities to new scale\n- [`rename-ring-width`](references\u002Frename-ring-width.md) - Replace ring with ring-3 for v3 default\n- [`rename-gradient-utilities`](references\u002Frename-gradient-utilities.md) - Replace bg-gradient-* with bg-linear-*\n- [`rename-outline-hidden`](references\u002Frename-outline-hidden.md) - Replace outline-none with outline-hidden\n\n### 4. Class Consolidation (HIGH)\n\n- [`class-size-utility`](references\u002Fclass-size-utility.md) - Replace matching w-* h-* with size-*\n- [`class-gap-over-space`](references\u002Fclass-gap-over-space.md) - Prefer gap-* over space-x\u002Fy-* in flex\u002Fgrid\n- [`class-inset-shorthand`](references\u002Fclass-inset-shorthand.md) - Replace top\u002Fright\u002Fbottom\u002Fleft with inset-*\n- [`class-border-color-explicit`](references\u002Fclass-border-color-explicit.md) - Add explicit border color for v4 default change\n- [`class-ring-color-explicit`](references\u002Fclass-ring-color-explicit.md) - Add explicit ring color for v4 default change\n- [`class-redundant-display`](references\u002Fclass-redundant-display.md) - Remove redundant display classes\n- [`class-hidden-priority`](references\u002Fclass-hidden-priority.md) - Remove display overrides for hidden attribute\n- [`class-container-utility`](references\u002Fclass-container-utility.md) - Replace container plugin config with @utility\n\n### 5. Arbitrary Value Cleanup (MEDIUM-HIGH)\n\n- [`arb-hex-to-theme`](references\u002Farb-hex-to-theme.md) - Replace arbitrary hex colors with theme tokens\n- [`arb-spacing-to-scale`](references\u002Farb-spacing-to-scale.md) - Replace arbitrary spacing with theme scale\n- [`arb-dynamic-classes`](references\u002Farb-dynamic-classes.md) - Avoid dynamic class name construction\n- [`arb-breakpoint-to-theme`](references\u002Farb-breakpoint-to-theme.md) - Replace arbitrary breakpoints with @theme\n- [`arb-zindex-to-scale`](references\u002Farb-zindex-to-scale.md) - Replace arbitrary z-index with defined scale\n\n### 6. Syntax Modernization (MEDIUM)\n\n- [`syntax-css-variable-parens`](references\u002Fsyntax-css-variable-parens.md) - Update CSS variable syntax from brackets to parentheses\n- [`syntax-variant-stacking`](references\u002Fsyntax-variant-stacking.md) - Update variant stacking to left-to-right order\n- [`syntax-important-modifier`](references\u002Fsyntax-important-modifier.md) - Use trailing ! for important modifier\n- [`syntax-grid-arbitrary`](references\u002Fsyntax-grid-arbitrary.md) - Use underscores in grid arbitrary values\n- [`syntax-gradient-preservation`](references\u002Fsyntax-gradient-preservation.md) - Reset gradient stops explicitly in variants\n- [`syntax-hover-media-query`](references\u002Fsyntax-hover-media-query.md) - Account for hover variant media query wrapping\n\n### 7. @apply & Architecture Cleanup (MEDIUM)\n\n- [`arch-apply-to-component`](references\u002Farch-apply-to-component.md) - Extract @apply blocks into framework components\n- [`arch-layer-to-utility`](references\u002Farch-layer-to-utility.md) - Replace @layer components with @utility\n- [`arch-scoped-reference`](references\u002Farch-scoped-reference.md) - Use @reference for @apply in scoped styles\n- [`arch-safelist-to-source`](references\u002Farch-safelist-to-source.md) - Replace safelist with @source inline()\n- [`arch-domain-composition`](references\u002Farch-domain-composition.md) - Reserve Tailwind for primitives, compose for domain\n\n### 8. Modern Feature Adoption (LOW-MEDIUM)\n\n- [`adopt-container-queries`](references\u002Fadopt-container-queries.md) - Use container queries instead of viewport breakpoints\n- [`adopt-not-variant`](references\u002Fadopt-not-variant.md) - Use not-* variant for negated conditions\n- [`adopt-in-variant`](references\u002Fadopt-in-variant.md) - Use in-* variant to simplify parent-state styling\n- [`adopt-field-sizing`](references\u002Fadopt-field-sizing.md) - Use field-sizing-content for auto-resizing textareas\n- [`adopt-starting-variant`](references\u002Fadopt-starting-variant.md) - Use starting variant for entry animations without JS\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n\n## Reference Files\n\n| File | Description |\n|------|-------------|\n| [references\u002F_sections.md](references\u002F_sections.md) | Category definitions and ordering |\n| [assets\u002Ftemplates\u002F_template.md](assets\u002Ftemplates\u002F_template.md) | Template for new rules |\n| [metadata.json](metadata.json) | Version and reference information |\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Ftailwind-refactor",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill tailwind-refactor",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill tailwind-refactor",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill tailwind-refactor","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Ftailwind-refactor\u002FSKILL.md",true,[],[54,66,76,85,91,98],{"skillNo":55,"name":56,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":62,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[59],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[63,64,65],"model","model hierarchy","model hierarchy skill",{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":72,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[71],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},[73,74,75],"MCP","zoom","zoom mcp",{"skillNo":77,"name":78,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[82,83,84,74],"sdk","zoom apps sdk","apps",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[87],{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":97,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[96],{"categoryNo":60,"categoryName":61,"taxonomyType":20,"taxonomyTypeDesc":21},[93],{"skillNo":99,"name":100,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[100]]