纯 CSS 不支持 Tree Shaking，因其无 ES 模块语义且样式匹配依赖运行时 DOM；可通过 PurgeCSS、Tailwind 的 content 配置等工具在类名粒度实现死代码消除。
Tree Shaking 本身是 JavaScript 模块打包（如 Webpack、Rollup、Vite）中对未引用的 ES 模块导出 进行静态分析并剔除的机制，它不直接作用于 CSS 或样式文件。CSS 文件没有 ES 模块的 import/export 语义，也没有运行时执行路径，因此原生不支持 Tree Shaking 意义上的“死代码消除”。
为什么纯 CSS 不支持 Tree Shaking
CSS 是声明式规则集合，浏览器按选择器匹配元素并应用样式，不依赖导入/导出或调用关系。构建工具无法静态判断某条 CSS 规则是否“永远不会被任何 HTML 元素匹配”，因为：
- HTML 和 CSS 通常分离，构建时未必能完整分析 DOM 结构
- 类名可能动态拼接（如
className={`btn ${isPrimary ? 'primary' : ''}`}） - JavaScript 可能通过
classList.add()、style属性等运行时操作影响样式 - CSS 选择器具有层叠、继承、媒体查询等复杂行为，静态推断不可靠
替代方案：在样式层面实现“类级别”的死代码消除
虽然不能 Tree Shake CSS，但可通过工具链在类名粒度上识别并移除未使用的样式规则。核心思路是：将 CSS 类名与 JS 中实际使用的字符串建立映射，再反向过滤 CSS。
-
CSS-in-JS 方案（推荐）：如
@emotion/styled或styled-components，组件内定义的样式仅随组件被引入才生效，配合摇树可自动剔除未引用的组件及其样式 -
PostCSS + uncss / purgecss：在构建后扫描 HTML/JS 中出现的类名，删除 CSS 中未匹配的规则。Vite 和 Next.js 默认集成 PurgeCSS（或其演进版
postcss-purgecss） -
Utility-First CSS（如 Tailwind）：所有原子类在构建时按需生成，通过
content配置指定源码路径，PurgeCSS 自动提取使用到的类，输出极简 CSS
关键配置示例（以 Vite + Tailwind 为例）
Tailwind 的 purge（现为 content）配置让样式消除真正落地：
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
立即学习“Java免费学习笔记（深入）”；
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx,vue}",
],
theme: { /* ... */ },
plugins: [],
}这样，只有在 src/ 下 JS/TS/JSX/Vue 文件中显式写出的 Tailwind 类（如 text-blue-500），才会保留在最终 CSS 中。
注意事项与限制
这类工具依赖准确的类名提取，以下情况会导致误删或漏删：
- 动态类名未被静态分析捕获（如
class={`${prefix}-btn`}），需在content中手动添加白名单 - 通过
data-*属性、JS 库（如 Alpine.js）或服务端渲染注入的类，需额外配置扫描范围 - 关键 CSS（如加载动画、第三方组件样式）应放入
safelist避免被清除
不复杂但容易忽略：样式层面的“死代码消除”本质是工程化约束 + 工具链协作，而非语言特性。选对方案（如 Tailwind + PurgeCSS），就能在类级别达成接近 Tree Shaking 的效果。
