使用自研TailwindCSS组件库时如何避免CSS冗余膨胀？

精准指定扫描范围 #

别用通配符全量扫描组件库的所有文件，直接把配置改成你实际用到的组件对应的文件路径：

@source "node_modules/shared-ui/dist/button.js"

这样Tailwind只会解析Button组件里的代码，提取其中用到的Tailwind类，不会处理其他没用到的组件，自然不会生成多余CSS。

给组件库加Tree Shaking支持 #

如果你的组件库是ES模块格式，先在组件库的package.json里配置好ES入口并声明无副作用：

{
  "module": "dist/index.esm.js",
  "sideEffects": false
}

然后确保应用的构建工具（Vite、Webpack等）开启了Tree Shaking。之后在Tailwind配置里只扫描应用自身的源码，因为Tree Shaking会自动把未引入的组件代码从打包产物中剔除，Tailwind也就不会解析到那些冗余的类了。

举个Tailwind配置示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  // 其余配置...
}

用自定义过滤规则缩小扫描范围 #

如果不得不保留通配符扫描，可以通过自定义转换函数过滤掉未使用的组件文件。比如在tailwind.config.js里这么写：

module.exports = {
  content: {
    files: ["node_modules/shared-ui/dist/**/*.js"],
    transform: (content, filePath) => {
      // 只保留你用到的组件文件，这里以button.js为例
      if (!filePath.endsWith('button.js')) return '';
      return content;
    },
  },
  // 其余配置...
}

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