gh_mirrors/tr/transform能自动转换静态CSS为Tailwind类，但无法处理动态类、CSS变量、嵌套结构、伪元素content等，因其本质是模式匹配而非语义理解；需人工补全并前置清理代码、校准根字体、拆分复合选择器。
直接用 gh_mirrors/tr/transform 能把大部分静态 CSS 规则转成 Tailwind 类，但动态类、CSS 变量、嵌套结构、伪元素内容（如 ::before 里的 content）基本无法自动处理——这些必须人工补全或重构。
为什么不能全靠自动转换
自动工具本质是模式匹配 + 规则映射，它看不到语义、上下文和运行时逻辑。比如：
-
.btn-primary { background: var(--primary-color); }→ 工具无法推断--primary-color对应哪个 Tailwind 颜色值，也不会生成bg-[#1e40af]这类任意值类（除非你开了「任意属性支持」且配置了 fallback） -
.card:hover .title { color: #374151; }→ 工具可能转出hover:text-gray-700，但只在.title是直系子元素且无其他条件时才准确；若实际 DOM 结构更深或含 JS 切换状态，就失效 -
@media (min-width: 768px) { .sidebar { display: block; } }→ 工具能识别为md:block，但若媒体查询里混了 calc() 或自定义断点，就可能漏判或错判
转换前必须做的三件事
不清理原始 CSS 就粘贴进工具，结果会大量冗余甚至冲突：
- 删掉所有
@import、@font-face、@keyframes—— 这些 Tailwind 不接管，得单独保留或迁移到tailwind.config.js.theme.extend - 把复合选择器拆开：例如
.header .nav a.active要先确认是否真需要三层嵌套，Tailwind 中通常用data-active属性 +[data-active]:text-blue-600更可控 - 检查单位一致性：工具默认按
1rem = 16px转换rem，如果你项目设了html { font-size: 62.5%; }（即1rem = 10px），必须在工具里手动调「根字体大小」为10
转换后必查的五个坑
工具输出只是起点，以下地方几乎 100% 需人工介入：
-
padding: 1.5rem 0.75rem;→ 工具可能转成p-6 px-3，但 Tailwind 的p-6是24px，而1.5rem在你项目里可能是24px或15px，得对照你的根字号确认 - 颜色值带透明度的写法：如
rgba(55, 65, 81, 0.8)，工具不会生成text-gray-700/80（这是 v3.3+ 才支持的语法），旧版本得手动改或加插件 - 响应式类名顺序错乱：工具可能把
sm:hidden md:block lg:hidden输出成lg:hidden sm:hidden md:block，虽然不影响功能，但违反 Tailwind 官方推荐的断点升序习惯，后期维护易出错 - 未启用
safelist就用了动态类：比如class="text-${error ? 'red' : 'green'}-500"，JIT 模式下会被 PurgeCSS 清掉，必须在tailwind.config.js的safelist里显式声明/text-(red|green)-500/ - Flex/Grid 布局的隐式行为丢失：CSS 里
display: flex; align-items: center;转成flex items-center没问题，但若原样式依赖flex-basis或grid-template-areas，工具无法还原，得手写@apply或用grid工具类重搭
真正省时间的地方，是把 .container { max-width: 1200px; margin: 0 auto; } 这类纯原子规则一键转成 max-w-7xl mx-auto；但一旦涉及交互逻辑、设计系统约束或跨组件复用，就得切回人脑判断——工具只是扳手，不是设计师。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
