在React Vite项目中使用Tailwind时移除未使用样式的报错问题

这个错误的核心原因是你的Tailwind配置中purge项的格式不正确，再加上不同Tailwind版本的配置规范差异，导致解析路径时出现了未定义的读取问题。下面分版本给出针对性解决方案：

情况1：你使用的是Tailwind CSS v3.x #

Tailwind v3已经完全废弃了purge配置项，改用content来指定需要扫描的文件，而且生产环境构建时会自动启用未使用CSS的移除（无需手动设置enabled）。

修改你的tailwind.config.js为如下格式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.tsx'], // 直接指定要扫描的文件路径
  theme: {
    extend: {},
  },
  plugins: [],
}

情况2：你使用的是Tailwind CSS v2.x #

v2版本虽然支持purge配置，但你当前的格式是错误的——你把purge写成了包含对象的数组，而正确的格式应该是一个对象（或直接是路径数组）。

修正后的配置如下：

module.exports = {
  purge: {
    enabled: true, // 生产环境启用
    content: ['./src/**/*.tsx'],
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

额外验证步骤 #

• 确认你的src目录下确实存在.tsx文件，避免路径匹配不到任何文件导致的异常
• 清理构建缓存：删除项目根目录的node_modules/.cache文件夹（或Vite生成的dist目录），然后重新执行npm run build
• 检查你的build命令tsc && vite build --base=/root/是否正常执行TS编译，确保TS编译没有提前报错影响后续的Vite构建

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