CSS 转 Tailwind 类完全指南

将 CSS 转换为 Tailwind 工具类是前端代码库现代化最常见的任务之一。但手动操作既容易出错又枯燥——这就是 StyleSnap 内置确定性转换引擎的原因。

基于 AI 的转换问题

依赖 LLM 将 CSS 转为 Tailwind 类的工具经常产生错误结果。LLM 可能将 `padding: 0.75rem` 映射为 `p-3`（正确），但也可能根据上下文输出 `p-2` 或 `px-3 py-2`。结果不可预测且无法测试。

StyleSnap 的确定性方法

StyleSnap 使用基于规则的引擎，完整覆盖 Tailwind 工具类目录。每个 CSS 属性-值对精确映射到一个 Tailwind 类（或一组已知候选）。没有幻觉——映射是确定性的。

工作原理

1. **解析** CSS 声明块为属性-值对
2. **匹配** 每对与 Tailwind 类定义（使用官方 Tailwind 配置）
3. **解决** 冲突（如 `margin: 1rem` → `m-4`，而非 `my-4 mx-4`）
4. **输出** 重现原始样式的最小工具类集合

处理的边界情况

亲自试试

安装 StyleSnap，悬停任意元素，点击 Tailwind 标签页。你会看到精确的工具类——没有猜测，没有 AI 幻觉。