CSS 转 TailwindCSS 转换器

CSS 转 TailwindCSS 转换器是一款专业的样式迁移工具，能够将传统 CSS 代码自动转换为 TailwindCSS 实用类，支持嵌套语法、媒体查询、伪类等复杂场景。适用于前端开发人员进行项目迁移、学习 TailwindCSS 语法或快速重构样式代码。

功能特性

智能语法转换

基于 css-to-tailwindcss 库，支持将标准 CSS 属性自动映射为对应的 TailwindCSS 实用类。转换引擎能够识别常见 CSS 属性如 padding、margin、color、font-size 等，并生成对应的 Tailwind 类名如 p-4、ml-4、text-blue-500、text-sm 等。

PostCSS 插件支持

集成 postcss-nested 插件，完整支持 SCSS / Sass 风格的嵌套语法。可以处理：

• 嵌套选择器 (&:hover、&.active)
• 媒体查询嵌套 (@media)
• @supports 特性查询
• 伪元素和伪类

这使得复杂的现代 CSS 代码也能准确转换。

Tailwind 配置集成

支持自定义 Tailwind 配置文件，转换时会参考配置中的：

• 自定义颜色：扩展的 colors 配置会被识别并用于转换
• 自定义断点：screens 配置用于媒体查询转换
• 自定义间距：spacing 配置用于 padding、margin 等
• @supports 特性：supports 配置用于特性查询

这确保转换结果与项目的 Tailwind 配置保持一致。

rem / px 单位转换

提供 rem 到 px 的转换选项（默认 1rem = 16px),可根据项目需求调整基准值。对于使用 rem 单位的项目，转换器会自动将其换算为最接近的 Tailwind 间距单位。

实时预览

左侧编辑器输入 CSS 代码，右侧实时显示转换后的 Tailwind 类名。编辑器支持语法高亮、代码格式化，方便对比和验证转换效果。

使用场景

项目迁移

将现有项目从传统 CSS 或 Bootstrap 迁移到 TailwindCSS 时，使用工具批量转换样式代码，大幅减少人工改写工作量。适合中大型项目的样式重构。

学习 TailwindCSS

初学者通过输入熟悉的 CSS 代码，观察转换结果来学习 TailwindCSS 的类名规则和命名约定。这是一种直观高效的学习方式，能快速建立 CSS 属性与 Tailwind 类的对应关系。

原型快速开发

从设计稿提取的 CSS 样式，快速转换为 Tailwind 类名，加速原型开发流程。特别适合设计师提供 CSS 代码的协作场景。

样式优化

将冗余的 CSS 代码转换为精简的 Tailwind 类，利用 TailwindCSS 的原子化特性减少样式重复，优化最终打包体积。

转换示例

基础样式

输入 CSS:

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

转换结果：

<div class="py-3.5 px-4 ml-4 text-center text-xs text-blue-500">

响应式设计

输入 CSS:

.container {
  width: 100%;

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

  @media (min-width: 1024px) {
    width: 970px;
  }
}

转换结果：

<div class="w-full md:w-[750px] lg:w-[970px]">

伪类状态

输入 CSS:

.link {
  color: #3b82f6;

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

转换结果：

<a class="text-blue-500 hover:text-blue-700 hover:underline">

配置说明

Tailwind Config 示例

工具默认提供一个示例配置，可根据项目实际情况修改：

{
  "content": [],
  "theme": {
    "extend": {
      "colors": {
        "custom-color": {
          "100": "#123456",
          "gold": "hsl(41, 28.3%, 79.8%)"
        }
      },
      "screens": {
        "custom-screen": { "min": "768px", "max": "1024px" }
      }
    },
    "supports": {
      "grid": "display: grid",
      "flex": "display: flex"
    }
  }
}

配置后，工具会识别自定义颜色 custom-color-100、custom-color-gold 和自定义断点 custom-screen:。

remInPx 选项

控制 rem 单位的转换基准。设置为 null 则保留 rem 单位不转换，设置为数字（如 16) 则将 rem 转换为对应 px 值后再映射到 Tailwind 类。

注意事项

转换限制

部分复杂的 CSS 特性可能无法完美转换为 Tailwind 类：

• 复杂的 CSS 函数（如 calc ()、var ()) 可能生成任意值语法 [value]
• 关键帧动画 (@keyframes) 需手动配置到 Tailwind 主题
• 浏览器特定前缀 (-webkit-、-moz-) 可能需要额外插件

这些情况下建议结合手动调整。

类名冗余

转换可能产生多个类名组合，实际使用时可考虑提取为 @apply 指令或组件，避免 HTML 过于冗长。

语义丢失

CSS 类名通常具有语义性（如 .button-primary),转换为 Tailwind 后只剩样式类，建议保留有意义的组件类名作为容器。

生产优化

转换结果仅用于开发阶段，生产环境需配置 PurgeCSS 或 Tailwind 的 purge 选项清除未使用的样式，确保最小打包体积。

特点

1. 支持完整的 Tailwind 配置文件，转换结果贴合项目实际
2. 集成 PostCSS 插件生态，处理能力更强
3. 双编辑器实时对比，便于验证和调整
4. 支持复杂嵌套和媒体查询，覆盖现代 CSS 特性
5. 纯浏览器运行，无需安装依赖或配置环境

适合需要批量迁移代码或深度定制转换规则的开发者。