CSS 转 Tailwind 转换器
将简单的 CSS 声明（display: flex、padding: 16px、color: #ffffff）转换为最接近的 Tailwind CSS 实用类，当没有精确令牌匹配时回退到任意值语法。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-tailwind-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "display: flex;\npadding: 16px;\njustify-content: c…"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-to-tailwind-converter` tool (CSS to Tailwind Converter) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-to-tailwind-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 转 Tailwind 转换器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
Tailwind CSS 不使用手写样式表，而是使用小型可重复使用的实用类来构建界面。使用 p-4 代替 padding: 16px;，使用 flex items-center justify-between 代替带有三行以下内容的 display: flex 规则。如果您要将现有样式表迁移到 Tailwind，或者您只是拥有来自设计工具的 CSS 代码片段并希望获得 Tailwind 等效值，手工重新键入每个声明会很乏味并且容易出错。此工具将纯 CSS 声明自动转换为其最接近的 Tailwind CSS 实用类。
工作原理
粘贴您的 CSS 声明 — 可以是简单的 property: value; 对或完整的 .selector { ... } 规则块（选择器和大括号会自动删除）— 该工具会遍历每个声明并将其映射到 Tailwind 类：
- 直接关键字属性 (
display、position、flex-direction、text-align、cursor等许多属性) 直接映射到其 Tailwind 名称，例如display: flex→flex、position: relative→relative。 - 间距属性 (
margin、padding、gap、width、height、top/right/bottom/left及其各边变体) 与 Tailwind 的默认间距比例相匹配 — 四分之一 rem (4px) 步长比例，其中16px正好是4个单位，所以padding: 16px变成p-4。简写值 (margin: 0 auto、padding: 8px 16px) 扩展为最小的匹配类集合 (mx-auto、px-4 py-2等)。 - 颜色 (
color、background-color、border-color) 与 Tailwind 的完整默认调色板相匹配 (slate、gray、zinc、red、orange、... 到 stone，所有 50–950 种色调)。精确的十六进制匹配变成text-blue-500；任何其他情况都回退到任意值类，如text-[#123456]。 - 字体大小、字体粗细、行高、字母间距、边框半径、不透明度、z-index、盒影、过渡等 以相同方式与各自的 Tailwind 比例相匹配。
- 没有直接 Tailwind 实用的任何内容 (异常属性、超出任何比例的值) 作为内联注释
/* property: value - No direct Tailwind equivalent */与类列表一起发出，因此没有任何内容会被无声地丢弃。
结果是单个以空格分隔的类字符串（加上任何回退注释），其顺序与输入声明相同 — 准备好粘贴到 class/className 属性中。
使用方法
- 将您的 CSS 声明或完整规则块粘贴到输入框中。
- Tailwind 类列表会在您输入时自动生成。
- 复制结果或将其下载为文本文件。
常见问题
这涵盖所有 CSS 属性吗? 不——这是一个最佳努力的转换，涵盖 Tailwind 具有直接实用工具的属性 (layout、flexbox/grid、spacing、typography、colors、borders、effects、transitions)。没有 Tailwind 等效项的属性保留为解释性注释，而不是猜测。
为什么我的颜色变成 text-[#123456] 而不是命名类?
只有与 Tailwind 默认调色板中某一种色调完全匹配的十六进制值才能解析为命名类 (text-blue-500 等)。任何其他十六进制或 RGB 值都使用 Tailwind 的任意值语法，这是类名中的有效 CSS，无需配置更改即可开箱即用。
这是否考虑了自定义的 tailwind.config.js?
不——转换基于 Tailwind 的默认主题比例。如果您的项目自定义了间距、颜色或字体大小比例，某些建议的类可能与您的配置不匹配；对这些使用任意值回退，并使用您自己的令牌进行调整。
我的 CSS 会被发送到任何地方吗? 不——所有内容都在您的浏览器中本地运行（或者通过 API 调用时，仅在请求处理程序中运行）。没有任何内容被存储。