React项目中TailwindCSS为何会为未使用组件生成样式？

问题场景 #

我在优化React+TailwindCSS项目的CSS体积时发现：

• 通过Vite创建新React项目并按官方指南配置TailwindCSS
• 创建了未被任何文件引用的MyComponent.tsx，组件内使用了bg-red-400类名
• 执行npm run build后，打包的CSS文件中仍包含bg-red-400的样式，且JavaScript体积会随组件是否被引用而变化

原因分析 #

TailwindCSS的JIT模式默认会扫描tailwind.config.js中content字段指定的所有文件，提取其中的Tailwind类名生成样式——不管这些文件是否被项目实际引用。只要未使用的组件文件在扫描范围内，里面的类就会被打包进CSS。而JS体积变化是因为Vite的Tree Shaking会剔除未引用的组件模块，但如果组件有副作用可能无法完全剔除。

解决方案 #

1. 精准配置Tailwind的content扫描范围

修改tailwind.config.js，排除未使用的组件目录，或者缩小扫描范围到仅包含被引用的文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
    "!./src/unused-components/**/*", // 排除未使用的组件目录
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

如果是零散的未使用文件，也可以直接在content里列出具体需要扫描的文件，避免通配符扫到无用文件。

2. 确保未引用组件被Tree Shaking剔除

Vite默认会Tree Shaking未引用的JS模块，但如果组件文件存在副作用（比如全局变量赋值、直接执行的代码），会被视为有副作用而保留。确保组件文件仅导出组件，无额外副作用：

// MyComponent.tsx 正确写法
export default function MyComponent() {
  return <div className="bg-red-400">Hello</div>;
}

如果项目中有带副作用的文件，可在package.json中标记"sideEffects": false（全局生效），或指定特定文件：

{
  "sideEffects": ["*.css", "!src/unused-components/**/*.tsx"]
}

3. 验证打包结果

执行npm run build后，检查dist/assets下的CSS文件，搜索bg-red-400确认是否已被剔除；也可以用vite build --report生成打包分析报告，直观查看体积优化效果。

注意事项 #

• Tailwind的JIT完全依赖content配置的文件扫描，所以这个配置的精准度是CSS体积优化的关键。
• 要同时处理Tailwind的扫描范围和JS的Tree Shaking，才能彻底去掉未使用组件带来的冗余代码和样式。

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