用途
该技能用于把普通 CSS 样式表迁移为 Tailwind CSS 工具类，并将工具类直接应用在标记中。它面向需要从手写 CSS 转向 Tailwind 的项目，帮助逐条规则完成转换并清理原有样式文件。
主要能力
技能覆盖以下转换场景，并提供对照参考：
- 布局与盒模型：如 display: flex → flex、display: grid → grid、display: none → hidden、position: relative → relative、position: absolute → absolute、justify-content: center → justify-center、align-items: center → items-center、gap: 16px → gap-4、width: 100% → w-full、max-width: 768px → max-w-3xl、margin: 0 auto → mx-auto、padding: 16px → p-4、overflow: hidden → overflow-hidden。
- 排版：如 font-size: 14px → text-sm、font-weight: 700 → font-bold、line-height: 1.5 → leading-normal、text-align: center → text-center、text-transform: uppercase → uppercase、color: #333 → text-[#333] 或主题色、letter-spacing: 0.05em → tracking-wide。
- 背景与边框：如 background-color: #f5f5f5 → bg-[#f5f5f5] 或 bg-neutral-100、border: 1px solid #e5e7eb → border border-gray-200、border-radius: 8px → rounded-lg、box-shadow: 0 1px 3px ... → shadow-sm。
- 响应式媒体查询：例如 @media (min-width: 768px) { .card { flex-direction: row; } } 转换为 <div class="flex-col md:flex-row">；断点映射为 sm:（640）、md:（768）、lg:（1024）、xl:（1280）、2xl:（1536）。
- 伪类与状态：例如 .btn:hover { background-color: #1d4ed8; } 转换为 <button class="hover:bg-blue-700">；可用前缀包括 hover:、focus:、active:、disabled:、first:、last:、odd:、even:、group-hover:、peer-checked:。
- 动画与过渡：如 transition: all 0.2s ease-in-out → transition-all duration-200 ease-in-out；@keyframes spin 配合 animation: spin 1s linear infinite → animate-spin（内置）或在 tailwind.config 中定义。
- 自定义属性与任意值：对没有直接工具类的写法使用任意值，例如 w-[calc(100%-2rem)]、grid-cols-[200px_1fr_1fr]、text-[clamp(1rem,2vw,1.5rem)]。
使用方式
技能给出的工作流程如下：
- 读取 CSS 文件并清点每一条规则。
- 找到引用每个选择器的对应标记（HTML、JSX、TSX、Vue、Svelte）。
- 按对照表逐条转换每条规则。
- 当某条规则的所有属性都已用工具类表达后，删除该 CSS 规则。
- 当 CSS 文件（或导入）为空后，将其移除。
- 验证页面外观一致，检查视觉回归。
适用场景
适用于将手写 CSS 样式表迁移到 Tailwind 工具类的项目，尤其是需要在 HTML、JSX、TSX、Vue、Svelte 等标记中直接应用工具类的场景。
限制与处理方式
部分内容无法纯用工具类表达，技能给出以下处理方式：
- 复杂选择器（如 .parent > .child + .sibling）：重构标记，或作为最后手段使用 @apply。
- @font-face：保留在全局 CSS 文件或 globals.css 中。
- 复杂 @keyframes：在 tailwind.config.ts 的 theme.extend.keyframes 下定义。
- CSS 变量：迁移为 tailwind.config.ts 中的 Tailwind 主题值。
技能还列出若干规则：存在主题时优先使用语义化 Tailwind 类（如 bg-primary）而非任意十六进制值；不要用 @apply 重建正在迁移掉的相同 CSS；按逻辑分组相关工具类（布局 → 间距 → 排版 → 颜色 → 效果）；如果组件有 10 个以上工具类，考虑抽取可复用组件而不是 CSS 类。
暂未提供的信息
该技能的收费、价格、平台支持范围、具体效果保证等信息在资料中暂未提供。