CSS 转 Tailwind 工具
将 CSS 属性转换为等效的 Tailwind CSS 工具类。覆盖 display、间距、排版、Flexbox、Grid 等常见属性。免费在线工具，纯浏览器端运行，即时转换。
使用方法
- 将 CSS 粘贴到左侧面板——可以是纯声明，也可以是带选择器的完整规则块。
- 点击 Convert to Tailwind（或按 Ctrl+Enter / Cmd+Enter）。
- 在右侧面板查看 Tailwind 类名，注释标注了未能映射的属性。
- 点击 Copy 复制输出内容到剪贴板。
转换示例
Flexbox 卡片
输入 CSS：
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
}输出 Tailwind：
/* .card */
flex flex-col items-center gap-4 p-6 rounded-lg排版样式
输入 CSS：
font-size: 1.125rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;输出 Tailwind：
text-lg font-semibold text-center uppercase tracking-wider使用限制
本工具使用内置映射表而非完整 CSS 解析器，覆盖约 80% 的常见工具类场景。
自定义颜色、多值 transition、CSS 变量和 calc() 等复杂值会以 /* keep: … */ 注释形式保留，
您可以手动处理或使用 Tailwind 的任意值语法（p-[13px]、text-[#ff6600]）转换。
FAQ
支持哪些 CSS 属性？
工具覆盖最常用的 CSS 属性：display、position、overflow、Flexbox、Grid、对齐、间距（margin/padding/gap）、尺寸（width/height）、排版（font-size、font-weight、text-align）、边框、border-radius、opacity、z-index、cursor 和 transition。
无法映射的属性如何处理？
无法映射的属性会以 /* keep: property: value */ 注释形式输出，您可以清楚地知道哪些样式需要手动处理，而不会丢失任何信息。
可以粘贴带选择器的完整 CSS 规则吗？
可以。您可以粘贴一个或多个 CSS 规则块（如 .card { ... }）。转换器会为每个选择器的类名分组，并用注释标注选择器名称。也支持粘贴不带选择器的纯声明。
输出与 Tailwind v4 兼容吗？
输出使用标准 Tailwind 工具类名，与 Tailwind v3 和 v4 均兼容。工具不生成任意值语法（如 p-[13px]），不在映射表中的值需要您手动添加。