自动工具能转掉70–80%静态规则，但动态类、css变量、伪元素content等必须人工介入；转换前须清理@import/@font-face/@keyframes、拆分复合选择器、校准根字体大小。
自动工具能转掉 70–80% 的静态规则，但剩下那部分必须人工介入——不是因为工具不行，而是它根本看不到你的业务逻辑、JS 控制的类名、CSS 变量语义或 DOM 实际结构。
用 gh_mirrors/tr/transform 转静态规则前必须清理三件事
直接把原始 .css 文件丢进去，大概率产出一堆冲突类或错位间距。得先手动处理：
- 删掉所有
@import、@font-face、@keyframes—— Tailwind 不管这些，留着只会让转换器误判上下文 - 把复合选择器拆开：
.header .nav a.active这种得先确认是否真依赖三层嵌套；Tailwind 更推荐用[data-active]+[data-active]:text-blue-600，否则响应式或状态切换时极易失效 - 校准根字体：如果项目设了
html { font-size: 62.5%; }（即1rem = 10px），必须在工具里把「根字体大小」设为10，否则padding: 1.5rem会被错转成p-6（对应 24px），而你实际要的是 15px
动态类、CSS 变量和伪元素 content 几乎全靠手改
工具对运行时生成的样式完全无感，以下情况它基本不处理：
-
.btn-primary { background: var(--primary-color); }→ 工具不会推断--primary-color对应bg-blue-600还是bg-[#1e40af]；若开了任意值支持且配置了 fallback，才可能出bg-[#1e40af]，否则直接漏掉 -
.card:hover .title { color: #374151; }→ 工具可能输出hover:text-gray-700，但前提是.title真是.card:hover的直系子元素；如果中间有 JS 插入 wrapper 或用了slot，这个类就失效 -
::before { content: "→"; }→ 所有伪元素的content值都不会被转，Tailwind 本身也不支持content类；得改用data-content+attr(data-content)，再配before:content-[attr(data-content)]
转换后必查的五个具体坑点
输出结果只是起点，以下地方几乎每次都要调：
-
padding: 1.5rem 0.75rem→ 工具可能转成p-6 px-3，但得对照你项目的rem实际像素值确认是否匹配；p-6固定是 24px，而1.5rem在你项目里可能是 15px -
color: rgba(55, 65, 81, 0.8)→ v3.3+ 才支持text-gray-700/80写法；旧版本得手动补插件或改用text-[#374151]/80 - 响应式类顺序错乱：如
sm:hidden md:block lg:hidden被输出成lg:hidden sm:hidden md:block，虽不影响渲染，但违反官方断点升序习惯，后期加新断点时容易漏 - 未启用
safelist就用了动态拼接类：class="text-${status}"→ 构建时会被 PurgeCSS 删掉，必须在tailwind.config.js里显式声明safelist: [/^text-/] - 媒体查询混了
calc()或自定义断点：@media (min-width: calc(768px + 1em)) { ... }→ 工具识别不了，直接跳过，这部分样式得手动补成md:max-w-none或类似类
最常被忽略的其实是「状态组合」：比如 .btn:disabled:hover，工具可能只转出 disabled:opacity-50，却漏掉 disabled:hover:cursor-not-allowed —— 这类多状态叠加必须逐个检查 DOM 实际行为，不能只信输出结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
