如何缩减Tailwind组件包生成的CSS体积？仅保留实际使用类

以下是几种可行的方案，能让最终生成的CSS仅包含项目实际使用的组件对应的Tailwind工具类：

1. 引导开发者按需指定组件文件（最简单的临时方案） #

让开发者不要将整个components目录加入@source，而是只添加他们实际用到的组件文件。比如仅使用Button组件时，CSS配置改为：

/* Step 1 - Install TailwindCSS */
@import "tailwindcss";

/* Step 2 - 仅导入用到的组件文件 */
@source "./../node_modules/package-name/components/Button.tsx";

优点：无需修改组件包，直接调整使用方式即可生效。
缺点：开发者需要手动维护导入的组件列表，组件使用数量较多时会比较繁琐。

2. 利用Tailwind JIT的依赖自动追踪（推荐方案） #

Tailwind v3默认启用JIT模式，它会自动解析项目文件中的导入关系，仅扫描被实际引用的组件代码。引导开发者修改tailwind.config.js，只扫描他们自己的项目源文件，而非组件包的整个目录：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // 仅扫描开发者自己的项目文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

当开发者在项目文件（比如src/App.tsx）中导入import { Button } from 'package-name'时，Tailwind会自动追踪到Button.tsx文件并提取其中的Tailwind类，完全忽略未被引用的Input.tsx等组件。
优点：开发者无需额外配置组件包路径，使用体验流畅，无冗余CSS。
缺点：需要确保开发者使用Tailwind v3及以上版本（目前已是主流）。

3. 组件包侧预生成按需加载的CSS片段 #

在组件包开发阶段，为每个组件单独提取对应的Tailwind类并生成独立的CSS文件：

1. 针对每个组件（如Button.tsx），使用Tailwind CLI单独生成仅包含该组件类的CSS：

   npx tailwindcss -i ./src/empty.css -o ./dist/Button.css --content ./components/Button.tsx
   

2. 在组件的TSX文件中导入对应的CSS：

   // ./components/Button.tsx
   import './Button.css';
   
   export const Button = () => {
     // 组件代码
   }
   

3. 发布组件包时，将这些单独的CSS文件一同打包。
   优点：开发者无需调整Tailwind配置，导入组件时自动加载对应CSS。
   缺点：可能存在类重复（多个组件共用的Tailwind类会被多次打包），需额外处理全局共用类的提取。

4. 提供Tailwind配置预设简化开发者操作 #

在组件包中提供一个tailwind-preset.js文件，引导开发者在自己的Tailwind配置中引入，并配合JIT模式实现按需扫描：

// 组件包中的 tailwind-preset.js
module.exports = {
  content: [], // 留空，让开发者补充自己的项目路径
  // 组件包自定义的theme、plugins等配置
}

开发者使用时只需在自己的tailwind.config.js中引入预设，并配置自己的项目文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('package-name/tailwind-preset')],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
}

这种方式既统一了组件包的Tailwind配置，又借助JIT的依赖追踪实现了按需加载。

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