CSS 转 Tailwind

概述

CSS 转 Tailwind 转换器将传统 CSS 代码自动映射为 Tailwind CSS 原子类，左侧输入 CSS，右侧实时显示转换结果。它支持嵌套语法、媒体查询、伪类伪元素和 @supports 特性查询，适合项目迁移、学习 Tailwind 类名对应关系或从设计稿快速生成原型代码。

转换示例：从 CSS 到 Tailwind

一个包含响应式断点和悬停状态的典型例子：

.button {
  padding: 0.875rem 1rem;
  margin-left: 16px;
  font-size: 12px;
  color: #3b82f6;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  @media (min-width: 768px) {
    width: 750px;
  }
}

转换结果：

<div class="py-3.5 px-4 ml-4 text-xs text-blue-500 hover:text-blue-700 hover:underline md:w-[750px]">

padding: 0.875rem 对应 py-3.5，font-size: 12px 对应 text-xs，嵌套的 &:hover 转为 hover: 变体，媒体查询 min-width: 768px 转为 md: 前缀。

自定义 Tailwind 配置的影响

工具右下方的配置区域接受标准 Tailwind JSON 配置，影响以下转换行为：

  • 自定义颜色：colors.custom-color.gold: "hsl(41, 28.3%, 79.8%)" 配置后，对应颜色值会被转换为 text-custom-color-gold 而非任意值语法
  • 自定义断点：screens["custom-screen"]: { min: "768px", max: "1024px" } 配置后，对应媒体查询会生成 custom-screen: 前缀
  • @supports：supports.grid: "display: grid" 配置后，@supports (display: grid) 块转为 supports-grid: 前缀

若不配置，工具会使用 Tailwind 默认主题进行映射，无法识别的值会退回到任意值语法（如 w-[750px]）。

无法完美转换的情况

会生成任意值语法的情况

  • calc() 表达式，如 width: calc(100% - 2rem)
  • var() CSS 变量引用
  • 非标准值，如 padding: 7px（Tailwind 无对应类）
  • 复杂 filter 函数链

需要手动处理的情况

  • @keyframes 动画定义（需配置到 Tailwind theme）
  • 浏览器前缀（-webkit-、-moz-）
  • CSS Grid 命名区域（grid-template-areas）
  • 自定义属性声明（:root { --var: value }）

rem 单位的转换基准

工具使用 1rem = 16px 作为换算基准（代码中硬编码为 remInPx: 16）。如果项目修改了根字体大小（如 html { font-size: 62.5% }，即 1rem = 10px），转换结果会偏离实际，此时需要手动校正生成的类名。