我在一个前端项目中工作，其架构如下：

• 1通过npm发布的React UI组件库
• 使用组件库的几个nextJS应用程序

我希望应用程序能够覆盖库的主题，并使用自己的。例如，“Button”组件具有以下实用程序类：

bg-primary text-secondary

字符串
库中的tailwind配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './stories/*'],
  theme: {
    extend: {
      colors: {
        primary: 'blue',
        secondary: 'white',
      }
    },
  },
  plugins: [],
  mode: 'jit',
};

型
应用程序#1中的tailwind配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
            primary: 'red',
            secondary: 'green',
      },
    },
  },

  plugins: [],
}

型
应用程序#2中的tailwind配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
            primary: 'gray',
            secondary: 'yellow',
      },
    },
  },

  plugins: [],
}

型

问题这只能部分工作，只有在库中使用的组件之外的应用程序中定义的实用程序类才会被应用。
示例在应用#1中，按钮将bg-primary类应用为红色，因为它在应用中的其他地方使用。但是text-secondary不会被应用为绿色，因为我从未在我的项目中使用过这个实用程序类。“text-secondary”不是Tailwind生成的，所以使用了库中的css，按钮的文本是白色的。