多应用依赖的Core包中，如何让应用动态指定Tailwind的content路径？

方案1：让core包提供可扩展的基础配置 #

core包的tailwind.config.js不写死content字段，导出包含主题、插件等基础配置的对象：

// core/tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // core自定义主题配置
    }
  },
  plugins: [],
  content: [] // 留空由终端应用扩展
};

终端应用在自己的tailwind.config.js中导入core的配置，合并并添加自身的content路径：

// 终端应用/tailwind.config.js
const coreConfig = require('core/tailwind.config');

module.exports = {
  ...coreConfig,
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue}', // 应用自身文件路径
    './node_modules/core/src/**/*.{js,jsx,ts,tsx}' // 若core组件需要被扫描则添加
  ]
};

这样终端应用完全掌控content范围，Tailwind JIT会按需生成CSS，同时复用core的主题与插件配置。

方案2：将core封装为Tailwind插件 #

把core的自定义样式、主题扩展封装成Tailwind插件，让终端应用通过插件引入，完全由应用控制编译流程：

// core/src/tailwind-plugin.js
module.exports = {
  plugin: ({ addComponents, theme }) => {
    // 添加core自定义组件样式
    addComponents({
      '.core-btn': {
        padding: theme('spacing.4'),
        borderRadius: theme('borderRadius.md')
      }
    });
    // 扩展主题变量
    theme.extend({
      colors: {
        core: {
          primary: '#165DFF'
        }
      }
    });
  }
};

在core的package.json中指定插件为入口：

{
  "main": "./src/tailwind-plugin.js"
}

终端应用配置中引入插件并设置自身content：

// 终端应用/tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [require('core')]
};

此方式下core不再直接导出CSS，而是融入应用的Tailwind编译流程，彻底利用JIT的清除功能，避免冗余代码。

Rollup相关注意事项 #

• 不打包Tailwind编译结果：core包用Rollup打包时，只输出配置/插件代码，不要预编译Tailwind CSS，留给终端应用处理。
• 声明peer依赖：在core的package.json中将tailwindcss、postcss设为peerDependencies，让终端应用自行安装对应版本，避免版本冲突：

  {
    "peerDependencies": {
      "tailwindcss": "^3.0.0",
      "postcss": "^8.0.0"
    },
    "devDependencies": {
      "tailwindcss": "^3.0.0",
      "postcss": "^8.0.0"
    }
  }
  

• 保留类名：Rollup打包core组件时，禁用Tailwind类名的混淆压缩，确保JIT编译器能识别类名。

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