我们有一个使用TailwindCSS的组件库(VueJS),我们将其作为私有npm包发布。我有以下问题:
- 我们如何在组件库中公开
tailwind.config.js
,以便消费项目可以利用组件库中的设置,例如消费项目中tailwind.config.js
中的颜色。 - 是否有推荐的方法来"继承"组件库中定义的样式?
- 由于TailwindCSS V3使用JIT生成类,那么我如何在组件库中包含这些类?
我们有一个使用TailwindCSS的组件库(VueJS),我们将其作为私有npm包发布。我有以下问题:
tailwind.config.js
,以便消费项目可以利用组件库中的设置,例如消费项目中tailwind.config.js
中的颜色。我不久前也必须这样做,我们使用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"),
],
}
"./node_modules/my-component-library/dist/*.js"
,当我将该配置导入到消费者应用程序时,它能够获取所有必要的样式/类来编译,而不需要从库中导出整个tailwind样式表。希望这有所帮助。对于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
]
}
实际的路径取决于您的项目结构,但希望您能理解。
我刚刚作为设计系统的一部分完成了这个任务,通过在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)),
],
}
require
并将其合并到父配置中)。这只是一个想法,祝好运! - ncthom91require("./node_modules/my-component-lib/tailwind.config")
,它运行得很好。但我在想是否有更好的最佳实践方法来做到这一点?因为它感觉有些 hacky... - icube