npm - 使用使用 TailwindCSS 的组件库

Question

我们有一个使用 TailwindCSS 的组件库 (VueJS)，我们将把它作为私有(private) npm 包发布。我的问题是

1. 我们如何在组件库中公开 tailwind.config.js，以便使用项目可以使用组件库中的设置，例如使用项目的 中的颜色tailwind.config.js.
2. 是否有“继承”组件库中定义的样式的推荐方法？
3. 而且由于 TailwindCSS V3 使用 JIT 生成类，我如何将这些类也包含在组件库中？

Answer 1

对于 1 和 2，您的组件库似乎可以导出 Tailwind plugin消费项目将在他们自己的 Tailwind 配置中注册。

plugin() 的第二个参数可以是您的组件库想要与用户的 Tailconfig 配置合并的任何配置。

例如

// plugin.js
const plugin = require('tailwindcss/plugin')

const myComponentLibraryConfig = {
  theme: {
    extend: {
      colors: {
        salmon: 'salmon'
      }
    }
  }
}

module.exports = plugin(({ addUtilities, addComponents, e, config }) => {
  // Add your custom styles here
}, myComponentLibraryConfig),

将组件库作为包发布时，确保包含插件。

然后，在您的消费项目中:

// tailwind.config.js

module.exports = {
    //...
    plugins: [
        require('my-component-library/plugin')
    ]

}

对于 3，您可能需要将组件库组件的位置显式添加到 content 部分。例如

// tailwind.config.js

module.exports = {
    content: [
        "./node_modules/my-component-library/**/*.js",
        "./src/components/**/*.{js,jsx,ts,tsx}", // or whatever
    ]
}

事物的实际路径将取决于您的项目结构，但希望您能理解。