CSS 转 Tailwind 工具

使用方法

1. 将 CSS 粘贴到左侧面板——可以是纯声明，也可以是带选择器的完整规则块。
2. 点击 Convert to Tailwind（或按 Ctrl+Enter / Cmd+Enter）。
3. 在右侧面板查看 Tailwind 类名，注释标注了未能映射的属性。
4. 点击 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 解析器。 自定义颜色、多值 transition、CSS 变量和 calc() 等复杂值会以 /* keep: … */ 注释形式保留， 您可以手动处理或使用 Tailwind 的任意值语法（p-[13px]、text-[#ff6600]）转换。

示例：带悬停状态与媒体查询的按钮

.btn {
  margin: 0 auto;
  padding: 16px 24px;
  color: #3b82f6;
  background-color: #ffffff;
  width: 50%;
  max-width: 64rem;
  line-height: 1.5;
  border: 1px solid #e5e7eb;
  margin-top: 13px;
  transition: all 0.2s;
}
.btn:hover { background-color: #2563eb; }
@media (min-width: 768px) { .btn { padding: 2rem; } }

转换结果：

/* .btn */
my-0 mx-auto py-4 px-6 text-blue-500 bg-white w-1/2 leading-normal border border-solid border-gray-200 transition-all duration-200
/* keep: max-width: 64rem */
/* keep: margin-top: 13px */

/* .btn:hover */
bg-blue-600

/* .btn (md) */
md:p-8

发生了什么，以及怎样补全类名（Tailwind 文档）：

• 16px 24px 变成 py-4 px-6：像素值除以 16 得到 rem，间距每一级是 0.25rem。
• #3b82f6、#ffffff、#2563eb 对上了默认色板（blue-500、white、blue-600）。
• border: 1px solid #e5e7eb 变成 border border-solid border-gray-200。简写里的每一部分（宽度、样式、颜色）都要在映射表里；有一部分不在时，整条声明保留为注释，不会丢掉某一部分。
• transition: all 0.2s 变成 transition-all duration-200。时长总是写出，因为只写 Tailwind 的 transition-* 类时长是 150 ms。Tailwind 的这些类还会把时间曲线设为 cubic-bezier(0.4, 0, 0.2, 1)，而 CSS 默认是 ease；需要完全一致时加上 ease-[ease]。
• max-width: 64rem 被保留为注释，尽管 max-w-5xl 就是 64rem。不在工具映射表里的值即使有对应类名也会保留。
• .btn:hover 被单独分组。请加上 hover: 前缀：hover:bg-blue-600。
• @media (min-width: 768px) 里的规则变成 md:p-8：768px 是默认的 md 断点。其他媒体查询只标在分组注释里，不加前缀。

补全后的类名：

<button class="mx-auto mt-[13px] mb-0 py-4 px-6 md:p-8 text-blue-500 bg-white hover:bg-blue-600
               w-1/2 max-w-5xl leading-normal border border-solid border-gray-200
               transition-all duration-200">

示例：不带选择器的常见声明

padding: 0.5rem 1rem;
margin: 0;
top: 0;
z-index: 10;
overflow: hidden;
position: sticky;
opacity: 0.5;
cursor: pointer;
grid-template-columns: repeat(3, 1fr);
flex: 1;
height: 100vh;
font-size: 14px;

转换结果：

py-2 px-4 m-0 top-0 z-10 overflow-hidden sticky opacity-50 cursor-pointer grid-cols-3 flex-1 h-screen text-sm

任意值

不在默认刻度里的值可以写在方括号里：mt-[13px]、max-w-[60rem]、text-[#ff6600]、grid-cols-[200px_1fr]（下划线代表空格）。转换器不会生成这种写法，而是留下 keep 注释，由你决定用任意值还是最接近的刻度。

限制

• 值是查映射表得到的，不做计算：表外的值即使有对应类名也会保留为注释（见上面的 max-width）。
• 带伪类的选择器会单独分组，不会写出 hover:、focus: 前缀。
• 只有宽度是默认断点（640px、768px、1024px、1280px、1536px 或等值的 rem）的 @media (min-width: …) 会变成前缀；其他媒体查询、@supports、容器查询只标在分组注释里。
• 带逗号的多个 transition、cubic-bezier()、不在刻度内的时长（0、75、100、150、200、300、500、700、1000 ms 之外）保留为注释。
• CSS 变量、calc() 和默认色板之外的颜色会保留为注释。
• Tailwind v4 改了一些工具类的名字（如阴影和圆角刻度），使用 v4 时请对照升级指南。