自动工具转css到tailwind可省70%以上时间，但需人工校验、拆分组件、补响应式断点；支持margin/padding/border、flex、color、font-size等基础属性，不支持伪类、媒体查询嵌套、css变量等。
直接用自动工具转 CSS 到 Tailwind，能省下 70% 以上手动重写时间，但结果不能直接上线——必须人工校验、拆分组件、补响应式断点。盲目全量替换会引入大量冗余类、破坏语义结构、丢失伪类/媒体查询逻辑。
哪些 CSS 规则能被 css-to-tailwindcss 准确识别
主流转换器（如 gh_mirrors/tr/transform 底层依赖的 css-to-tailwindcss 库）对以下规则支持较好：
-
margin/padding/border值（含简写，如margin: 0 auto→mx-auto） -
display、flex相关属性（display: flex→flex，align-items: center→items-center） -
color、background-color（支持十六进制、rgb、预设色名，如red→text-red-500） -
font-size、font-weight、text-align（font-size: 1.25rem→text-lg，前提是 Tailwind 配置中存在对应比例） -
max-width（max-width: 1200px→max-w-[1200px]，注意方括号语法需 Tailwind v3.0+）
不支持或易出错的包括：:hover / ::before 伪类、@media 查询嵌套、CSS 变量（var(--primary)）、calc() 表达式、复合选择器（.card .title）、@keyframes 动画。
本地运行 gh_mirrors/tr/transform 的实操要点
这是目前最活跃、配置最透明的开源转换工具，推荐优先试用：
- 克隆后执行
yarn && yarn dev，访问http://localhost:3000/css-to-tailwind - 务必在
ConversionPanel中设置「根字体大小」为项目实际html的font-size（如 16px），否则rem转换会偏差 - 启用「任意属性支持」才能正确处理
max-w-[1200px]、top-[50%]这类动态值 - 粘贴单个 class 规则更稳妥（如只粘
.container { ... }），避免多 class 混合导致解析错位 - 转换结果右侧默认不带换行，建议复制后用 Prettier 或 VS Code 的 Tailwind 插件自动格式化类名顺序
转换后必须人工处理的三类问题
工具输出只是起点，跳过这些步骤会导致维护性崩坏：
-
响应式断点缺失：工具不会自动加
md:p-6或lg:max-w-4xl，需对照设计稿逐个补全 -
重复类爆炸：一个
.btn原本 5 行 CSS，可能转成 12 个 Tailwind 类；应提取为@layer components { .btn { @apply px-4 py-2 rounded bg-blue-600 text-white; } } -
逻辑耦合断裂：原 CSS 中
.card:hover .card-title这种父子联动，必须手动改写为<div class="group ...">... <h3 class="group-hover:text-blue-600 ..."></h3> </div>
最常被忽略的是：工具无法识别你项目里“约定俗成”的语义层级（比如 .section-header 实际承担了 h2 语义），这类地方必须回归 HTML 结构重审，不能只盯样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
