Softonic

CSS 转 Tailwind

步 1 / 2
转换为 Tailwind

逐条将旧样式表迁移到 Tailwind 十分繁琐。该转换器接收一段纯 CSS（无论是否带有选择器和花括号），并将每条声明重写为一个 Tailwind 工具类。已识别的配对会映射到具名工具类，如 flex、items-center 或 rounded-lg；其余情况则回退到 Tailwind 的任意值语法 [property:value]，因此不会有任何内容被悄悄丢弃。

转换器如何处理你的 CSS

  1. 1

    粘贴 CSS

    粘贴一条完整规则，如 `.card { padding: 16px; border-radius: 8px; }`，或仅粘贴花括号内的声明。

  2. 2

    解析器移除注释

    在按分号拆分声明之前，块注释 `/* ... */` 会先被移除。

  3. 3

    每条声明都会被映射

    常见属性会映射到真正的 Tailwind 工具类（间距、圆角、字号、flex、显示、文本对齐）；未知属性则回退为 `[prop:value]`。

  4. 4

    复制并应用

    将类名列表粘贴到对应 HTML 元素的 `class` 属性中。

哪些内容会映射到具名工具类

Tailwind 的默认主题无法涵盖所有可能的 CSS 取值，因此转换器会优先处理存在具名工具类的取值，其余情况一律使用任意值。

直接映射

CSS 声明 Tailwind 工具类
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

感知比例的映射

padding、margin、width、height 以及最小/最大尺寸都会将 px 值除以 4，从而得出一个 Tailwind 间距档位，padding: 16px 变为 p-4，width: 32px 变为 w-8。未能落在整齐档位上的取值会在相应工具类上回退为任意值，例如 width: 37px 变为 w-[37px]。

border-radius 会映射到最接近的具名工具类（rounded-sm、rounded-md、rounded-lg、rounded-xl、rounded-2xl）。超过 16px 的尺寸会变为 rounded-full，这对胶囊形（pill）元素很方便，但对异常大的圆角并不正确，上线前请检查输出结果。

font-size 会按像素阈值归入 text-xs 到 text-3xl 之间的档位。

注意事项

  • 伪类、媒体查询和选择器不会被转换；只有花括号内的声明会被转换。你仍需自行添加 hover: 或 md: 等变体。
  • 由于转换器无法获知你的 Tailwind 主题调色板，颜色会落为任意值，如 text-[#1f2937]。请手动替换为 text-gray-800 或你自定义的 token。
  • 你很少使用的简写属性（border、background、transition）会原样输出为 [property:value]，上线前请予以确认。

常见问题

输出所用的工具类名称在 Tailwind v3 和 v4 中都保持稳定；方括号内的任意值在两个版本中也都有效。粘贴后，你可能希望将颜色重新令牌化到 v4 的 @theme 调色板中。

转换器无法读取你 tailwind.config.js 中的颜色比例，因此会将该颜色作为任意值输出到相应工具类上（text-[#1f2937]）。请手动将其映射到最接近的调色板 token，例如 text-gray-800 或你已定义的品牌 token。

可以，粘贴多条规则即可。工具会为每个选择器输出一份类名列表，并用 /* selector */ 注释分隔，便于你与对应的 HTML 对齐。

CSS 会被发送到我们的服务器进行转换。它不会被存储，也不会出现在页面链接中。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本