CSS 转 Tailwind 工具
粘贴旧 CSS,取得 utility-first 的起点,方便迁移、整理或快速改写成 Tailwind。
转换结果会显示在这里。
为什么使用 CSS 转 Tailwind 工具?
加速迁移
把既有 CSS 较快搬进 Tailwind 流程,将已知 declarations 转成 utility class 候选,而不是每一行手动翻。
支持 arbitrary value
当标准 utility class 不存在时,使用 Tailwind arbitrary syntax 保留不常见的值。
以代码审阅为前提重构
把输出当作迁移草稿,再把重复值整理成 token、component、variant 或可复用 class pattern。
常见可转换 properties
displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity
:hover、::before 或 media queries 这类复杂 selectors,转换后仍可能需要手动整理。
常见问题
转换结果可以直接当正式 class 吗?
不建议。自动转换适合作为起点。复杂 selector、responsive rules、pseudo-elements、cascade 行为和 component 语义仍需要人工审阅。
可以贴没有 selector 的 raw declarations 吗?
可以。工具会暂时包住单独 declaration,让转换器仍能处理。
重复的 arbitrary values 该怎么处理?
如果某个值在 UI 中重复出现,建议变成 theme token、component class 或 design-system primitive,不要留下很多一次性的 arbitrary utilities。
这能转 media queries 和 hover states 吗?
部分简单 declarations 可被转换,但 responsive variants、hover states、pseudo-elements 和 nested selectors 通常仍需要手动清理。