如何在npm workspaces中配置统一的Tailwind共享配置？

你可以通过提取公共Tailwind基础配置到common包，让应用包继承该配置的方式，实现单份配置复用，同时保留每个应用独立的content扫描规则。

步骤1：在common包中定义基础Tailwind配置 #

在packages/common目录下创建tailwind.config.base.js，将所有需要共享的自定义配置（主题扩展、插件、核心插件开关等）放在这里，不要包含content字段（因为每个应用的content需要包含自身代码+common的源码）：

// packages/common/tailwind.config.base.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
        // 其他自定义颜色、字体、间距等
      },
    },
    plugins: [
      // 你的自定义插件，比如@tailwindcss/forms等
    ],
    // 其他共享配置，比如corePlugins
  }
};

步骤2：让应用包继承基础配置 #

在app1和app2的tailwind.config.js中，引入common包的基础配置，合并后添加各自的content规则（包含自身源码和common的源码）：

方式一：使用相对路径直接引入（简单直接）

// packages/app1/tailwind.config.js
const baseConfig = require('../common/tailwind.config.base');

module.exports = {
  ...baseConfig,
  content: [
    // 扫描当前应用的所有源码文件
    './src/**/*.{tsx,jsx,html}',
    // 扫描common包的源码文件，确保Tailwind能识别组件中的类名
    '../common/src/**/*.{tsx,jsx}'
  ]
};

app2的配置完全同理，只需要保证路径正确即可。

方式二：通过package.json exports规范引入（更优雅，避免路径变动问题）

如果希望更规范，避免后续目录结构变动导致相对路径失效，可以在packages/common/package.json中添加exports字段，暴露基础配置文件：

// packages/common/package.json
{
  "name": "common",
  // 其他字段...
  "exports": {
    "./tailwind-config": "./tailwind.config.base.js"
  }
}

之后应用包的配置就可以通过包名引入：

// packages/app1/tailwind.config.js
const baseConfig = require('common/tailwind-config');

module.exports = {
  ...baseConfig,
  content: [
    './src/**/*.{tsx,jsx,html}',
    '../common/src/**/*.{tsx,jsx}'
  ]
};

关键注意事项 #

• 必须扫描common的源码文件而非dist文件：因为dist文件可能经过编译压缩，Tailwind无法准确识别其中的类名，所以一定要指向common/src下的文件。
• 若common包中有自定义Tailwind工具类或插件，确保这些代码能被应用正确访问：比如将工具类放在common/src/styles下，然后在应用的全局样式文件中引入@import 'common/src/styles/utils.css';。
• 无需在common包中单独配置content：因为common包本身不单独构建Tailwind样式，样式最终是在各个应用中生成的，content规则由应用负责定义。

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