如何配置Tailwind.config.js识别间接依赖@shared的类名？

问题背景 #

根据Tailwind官方文档：

如果您创建了一套使用Tailwind样式的可复用组件并在多个项目中导入，请确保配置Tailwind以扫描这些组件中的类名：

// tailwind.config.js
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './node_modules/@my-company/components/src/**/*.js',
  ],
  // ...
}

但假设@my-company/components依赖另一个基于Tailwind的包@shared，依赖树如下：

- my-app
  - @my-company/components
    - @shared

请问在此场景下，应如何定义tailwind.config.js，使Tailwind能够生成@shared中的类名？

解决方案 #

直接在content配置数组中添加@shared包内包含Tailwind类名的文件路径即可，Tailwind会扫描指定路径下的所有匹配文件来提取类名，不受依赖层级限制。

示例配置如下：

// tailwind.config.js
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './node_modules/@my-company/components/src/**/*.js',
    // 根据@shared包的实际文件结构和类型调整路径与扩展名
    './node_modules/@shared/src/**/*.{html,js,vue,ts}',
  ],
  // ...
}

注意事项 #

• 请根据@shared包的实际文件结构调整路径，比如如果该包的组件文件都放在dist目录下，就把路径改为./node_modules/@shared/dist/**/*.{html,js}
• 尽量精准指定文件扩展名（比如js、vue、ts等），避免扫描不必要的文件，提升Tailwind的构建性能

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