Tree Shaking 本身不处理 CSS，因其依赖 ES Module 的 import/export 静态分析，而 CSS 无导出语义、仅被视为副作用导入；真正清理未用样式的是 Tailwind 的类名扫描、PurgeCSS 或 UnoCSS 等基于模板匹配的工具。
Tree Shaking 本身不处理样式代码——它只作用于 JavaScript 模块中的 未使用的导出（export）。CSS 类名、内联样式或样式文件里的规则，不属于 JS 的 export/import 体系，因此标准 Tree Shaking 对它们完全无效。
为什么 CSS 不受 JS Tree Shaking 影响
CSS 是声明式语言，没有“导出”概念；工具无法通过 import 分析哪些 class 实际被用到。比如你在 HTML 中写了 <div class="text-red-500">，但这个字符串对 JS 打包器来说只是普通文本，不是模块引用。
<ul>
<li>JS 的 Tree Shaking 依赖 <code>import/export 静态结构，CSS 文件（如 import './index.css'）只算一个副作用导入，不会分析其内部内容
bg-blue-200，只要它存在于 Tailwind 的完整 CSS 中，就会被打包进去（除非另有机制）Tailwind CSS 的“类名级 Tree Shaking”
真正清理未使用样式的是 Tailwind 自己的构建流程，常被通俗称为 “CSS Tree Shaking”，但它和 JS 的 Tree Shaking 原理不同：
- 它扫描项目中所有源文件（
.html、.jsx、.vue等），提取所有出现的类名字符串 - 只生成这些被扫描到的类对应的 CSS 规则，其余全部跳过
- 这个过程发生在
tailwindcss -i input.css -o output.css构建阶段，不是 Webpack/Vite 的 Tree Shaking
其他 CSS 框架或纯 CSS 怎么清理
没有内置扫描能力的框架（如 Bootstrap、自定义 CSS）需要额外工具：
Java Development Man
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。
立即学习“Java免费学习笔记（深入）”；
- PurgeCSS：独立工具，可配置扫描路径和匹配规则，配合 Webpack/Vite 插件使用
- Unocss：按需生成原子化 CSS，只产出实际用到的规则，支持 JSX/HTML/Vue 多种语法解析
- PostCSS 插件（如 postcss-unused-css）：需配合 HTML 解析器，效果有限且维护成本高
关键配置提醒
无论用哪种方案，都必须确保：
- 扫描范围覆盖所有模板文件（包括动态拼接的类名，如
class={`btn ${isActive ? 'active' : ''}`}，需在 Tailwind 配置中用safelist保留） - 不要把样式文件放进
sideEffects: false，否则 Webpack 可能直接跳过整个 CSS 导入（导致样式丢失） - 开发时关闭 Purge 或启用
content: ["./src/**/*.{js,jsx,ts,tsx,html}"]全量扫描，避免漏掉新写的 class
