Vite自定义className前缀插件失效：构建后Tailwind类消失问题排查

你踩的几个坑 #

1. 自定义插件只改了固定类名：你的transform方法只盯着'bg-red-900 w-40 h-40'这串字符替换，其他类名根本没碰过。Tailwind是扫描代码里的类名生成CSS的，没加前缀的类它找不到，自然不会生成样式。
2. 插件顺序搞反了：Vite插件是按数组顺序执行的，你把自定义前缀插件放在react()前面，react插件先编译JSX的话，你的插件可能匹配不到原始的类名了。
3. 没必要自己写插件：Tailwind本身就支持自动给类名加前缀，你这属于绕远路还没做好。

靠谱的解决办法 #

第一步：删掉没用的自定义插件 #

直接把prefix.plugin.ts删了，Vite配置也改回正常的：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

第二步：配置Tailwind自动前缀 #

确保tailwind.config.js里的配置正确，并且能扫到所有代码文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 这个路径必须覆盖所有用到Tailwind的文件
  ],
  prefix: 'tw-', // 这里设置前缀，Tailwind会自动给生成的CSS类加前缀
  theme: {
    extend: {},
  },
  plugins: [],
}

第三步：代码里用带前缀的类名 #

直接在JSX里写带tw-前缀的类就行：

<div className="tw-bg-red-900 tw-w-40 tw-h-40"></div>

要是嫌手动改麻烦，可以用Tailwind的@apply写样式，或者装个ESLint插件自动给类名加前缀，比自己写插件稳多了。

非要自己写插件？（不推荐） #

如果就是想自己实现，那得改替换逻辑，用正则匹配所有Tailwind类，还要调整插件顺序：

import type { Plugin } from 'vite';

export default function () {
  return {
    name: 'prefix-classname',
    // 用正则匹配常见的Tailwind类，实际可以根据需要扩展正则
    transform(code) {
      return code.replace(/\b(bg-\w+|w-\d+|h-\d+|p-\d+|m-\d+)\b/g, 'tw-$1');
    },
  } as Plugin;
}

然后Vite配置里把react插件放前面：

export default defineConfig({
  plugins: [react(), prefix()],
});

注意：这种正则匹配很容易误改代码里的变量名、注释，万一哪天Tailwind加了新类，正则还得更新，真不如用官方方案省心。

内容的提问来源于stack exchange，提问作者m3nnn0