使用使用 TailwindCSS 的组件库

Question

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

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

Answer 1

对于 1 和 2，您的组件库似乎可以导出Tailwind 插件，使用项目将在自己的 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
    ]
}

事情的实际路径将取决于您的项目结构，但希望您明白这一点。