使用TailwindCSS的组件库应用。

Question

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

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

- icube

---

今天很高兴能找到这个问题，我也有类似的疑问。虽然我没有答案，但我想分享一些想法：我的理解是，如果您发布了声明其TW样式的Vue组件，则只需要库的使用者运行Tailwind的V3/JIT构建，并确保它访问您从库中提供的文件即可。如果它按照我想象的那样工作，那么您只需要确保在构建之前继承任何自定义配置（例如，通过require并将其合并到父配置中）。这只是一个想法，祝好运！ - ncthom91

是的，我成功地使用了 require("./node_modules/my-component-lib/tailwind.config")，它运行得很好。但我在想是否有更好的最佳实践方法来做到这一点？因为它感觉有些 hacky... - icube

Answer 1

我不久前也必须这样做，我们使用rollup作为tailwind组件库。 我安装了rollup的copy插件（从他们的官方插件列表）并在我的rollup.config.js中添加如下内容：

import copy from "rollup-plugin-copy";

const config = {
  plugins: [
      copy({
        targets: [
          {
            src: "./tailwind.config.js",
            dest: "dist",
          }
        ]
      })
  ]
}
export default config;

所以我将那个文件复制到我的输出目录，并在消费这个库的任何应用程序中使用它，就像这样：

//tailwind.config.js
const commonConfig = require("component_library/dist/tailwind.config.js")
module.exports = { ...config }

这可以解决你问题中的#1和#2。我记得在Tailwind文档中看到过支持这个功能，但是不记得在哪里了。你也可以在消费者应用程序中使用基本解构来进行覆盖，像这样：

//tailwind.config.js
const commonConfig = require("component_library/dist/tailwind.config.js")

module.exports = {
  ...commonConfig,
  plugins: [
    ...commonConfig.plugins,
    require("@tailwindcss/line-clamp"),
  ],
}

关于第三个问题，我能够采用@harryg的方法，只需在我的组件库的tailwind.config.js中添加"./node_modules/my-component-library/dist/*.js"，当我将该配置导入到消费者应用程序时，它能够获取所有必要的样式/类来编译，而不需要从库中导出整个tailwind样式表。希望这有所帮助。

- Al Pal

---

Vite用户的另一种选择是vite-plugin-static-copy。不确定为什么这个Rollup插件根本不起作用（Vite在内部使用Rollup，并与许多Rollup插件进行了互操作），但我成功地让这个专门针对Vite的插件正常工作。URL：https://www.npmjs.com/package/vite-plugin-static-copy - undefined

Answer 2

对于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')
    ]

}

对于第三点，看起来你可能需要在content部分中显式添加组件库组件的位置。例如：

// tailwind.config.js

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

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

- harryg

Answer 3

我刚刚作为设计系统的一部分完成了这个任务，通过在dist文件夹中提供配置：

./src/assets/tailwind/config.js

const content = [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
];

// theme values to be shared
const theme = {};

const plugins = [
    '@tailwindcss/line-clamp',
];

module.exports = {
    defaultContent: content,
    defaultTheme: theme,
    defaultPlugins: plugins,
};

./tailwind.config.js

const { defaultContent, defaultTheme, defaultPlugins } = require('./src/assets/tailwind/config');

module.exports = {
  content: [
    ...defaultContent,
  ],
  theme: {
    ...defaultTheme,
  },
  plugins: [
    ...defaultPlugins.map(plugin => require(plugin)),
  ],
}

另外，我有一个Rollup构建步骤来执行这个操作：

"scripts": {
    "publish:lib": "normalstuff && node build-meta",
},

./build-meta.js

const fs = require('fs-extra');
const path = require('path');

fs.copySync(path.resolve(__dirname, './src/assets/tailwind/config.js'), 'dist/assets/tailwind-defaults.js');
// I learned this technique from PrimeVue (so check their GitHub repo)

消耗性应用程序

const { defaultContent, defaultTheme, defaultPlugins } = require('@yolo-inc/package-name/assets/tailwind-defaults');

module.exports = {
  content: [
    ...defaultContent,
  ],
  theme: {
    ...defaultTheme,
  },
  plugins: [
    ...defaultPlugins.map(plugin => require(plugin)),
  ],
}

- agm1984