重磅推荐！这个CSS转换工具让原子化CSS迁移效率提升200%，被尤雨溪点赞

什么是 transformToTailwindcss？

transformToTailwindcss 是一个强大的转换工具，它可以将传统的 CSS 代码、样式文件甚至整个组件转换为 Tailwind CSS 的原子化类语法。这个工具由社区开发，曾被阮一峰在其科技周刊中推荐，并获得 Vue.js 作者尤雨溪的点赞认可。

主要功能与优势

• 性能优先 – 通过利用 Tailwind CSS 的实用类减少打包体积
• 遗留迁移 – 无缝将老项目升级到现代化的 Tailwind CSS
• 开发体验 – 保持设计系统的一致性
• 框架无关 – 支持 Vue、React、Svelte、Astro 和原生 HTML
• 自动 Safelist – 自动收集生成的类名，永不丢失
• 循环保护 – 智能防护，避免无限构建循环
• 构建优化 – 智能跳过，仅在变化时重新生成

非常适合对传统项目进行现代化改造或优化性能。支持 Vue、React、Svelte、Astro 等多种框架！

为什么要转换到 Tailwind CSS？

• 极致性能
  Tailwind CSS 基于原子化类，打包时只保留用到的样式，体积可显著缩小；JIT 编译让开发环境秒级热更新，生产环境零运行时开销。
• 设计一致性
  内置完整的设计系统（间距、颜色、排版、圆角、阴影等），团队无需再维护分散的变量文件，直接按规范拼类即可，天然避免「像素漂移」。
• 研发提效
  「写 HTML 即写样式」：无需在 JS/CSS 文件间来回切换，模板里一眼看到 UI 全貌；配合 VSCode 智能提示，拼写错误即时可见，还原设计稿速度提升显著。
• 响应式友好
  断点前缀（sm:、md:、lg:…）直接写在类名里，一行代码实现多端适配；再也不用写层层叠叠的媒体查询，逻辑直观、可维护性高。
• 生态成熟
  官方持续维护，社区插件丰富（Typography、Forms、Line-clamp 等）；主流 UI 库（Headless UI、DaisyUI）原生兼容，拿来即用。
• 迁移低成本
  支持渐进式接入：旧项目可保留原有样式，新模块用 Tailwind 编写；transformToTailwindcss 一键批量转换，自动处理冲突、生成 safelist，升级过程可灰度、可回滚。

一句话总结：用 Tailwind CSS，让样式从「成本中心」变成「效率引擎」。

安装与配置

全局安装

pnpm add -g transform-to-tailwindcss

在项目中安装

pnpm add -D transform-to-tailwindcss

配置 package.json 脚本（推荐）

在项目的 package.json 文件中添加转换脚本，方便日常使用：

{
  "scripts": {
    "transform:css": "totailwindcss ./src",
    "transform:component": "totailwindcss ./src/components"
  }
}

基本使用方法

命令行使用

转换 Vue 单文件组件

totailwindcss ./src/pages/VueComponent.vue

转换整个目录

totailwindcss --input ./src/components

在线转换工具

除了命令行工具外，还可以使用基于 transformToTailwindcss 的在线转换工具，无需安装即可使用：

• transformToTailwindcss 在线转换工具： https://to-tailwindcss.netlify.app/

构建工具集成

Vite（推荐）

// vite.config.ts
import { defineConfig } from "vite";
import { viteTransformToTailwindcss } from "transform-to-tailwindcss";

export default defineConfig({
  plugins: [viteTransformToTailwindcss(/* options */)],
});

Rollup

// rollup.config.js
import { rollupTransformToTailwindcss } from "transform-to-tailwindcss";

export default {
  plugins: [rollupTransformToTailwindcss(/* options */)],
};

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("transform-to-tailwindcss").webpackTransformToTailwindcss({
      /* options */
    }),
  ],
};

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require("transform-to-tailwindcss").webpackTransformToTailwindcss({
        /* options */
      }),
    ],
  },
};

Esbuild

// esbuild.config.js
import { build } from "esbuild";
import { esbuildTransformToTailwindcss } from "transform-to-tailwindcss";

build({
  plugins: [esbuildTransformToTailwindcss(/* options */)],
});

配置选项

选项	描述	默认值
debug	是否开启调试模式	false
isRem	是否将 px 转换为 rem	false
include	要处理的文件	–
exclude	要忽略的文件	–
collectClasses	自动收集生成的类名	false
outputPath	收集类名的输出路径	./safelist-classes.js
skipIfNoChanges	无变化时跳过生成	true

实际应用示例

转换 Vue 单文件组件

<template>
  <button type="button" class="button">打开</button>
</template>

<style scoped>
  .button {
    padding: 8px 12px;
    margin-right: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }
  .button:hover {
    background: #f7f7f7;
  }
</style>

使用 transformToTailwindcss 转换后，会得到对应的 Tailwind CSS 类：

<template>
  <button
    type="button"
    class="px-3 py-2 mr-2 border border-[#ddd] rounded-[6px] bg-white cursor-pointer hover:bg-[#f7f7f7]"
  >
    打开
  </button>
</template>

<style scoped></style>

打包体积可显著缩小，运行时开销为零！

结语

通过 transformToTailwindcss，我们可以轻松地将传统 CSS 转换为 Tailwind CSS 原子化类，从而享受 Tailwind CSS 带来的性能优势和灵活性。无论你是使用 Vite、Rollup、Webpack 还是 Vue CLI，transformToTailwindcss 都能提供无缝的集成体验。赶快尝试一下吧！