消费使用parwindcss的组件库
我们有一个组件库(VUEJS),该库使用将以私有NPM软件包发布的tailwindcss。我遇到的问题是
- 我们还如何公开组件库中的
tailwind.config.js
,因此消费项目可以利用组件库中的设置,例如消费项目的颜色<代码> tailwind.config.js 。 - 是否有推荐的方法来“继承”组件库中定义的样式?
- 而且,由于TailWindCSS V3使用JIT生成类,因此我还如何在组件库中包括类?
We have a Component library (VueJS) that uses TailwindCSS which we are going to publish as a private npm package. The questions I have are
- How do we also expose the
tailwind.config.js
in the Component Library so the consuming project can make use of the settings in the Component Library for example the colors in the consuming project'stailwind.config.js
. - Is there a recommended way of "inheriting" the styles defined in the Component library?
- And also since TailwindCSS V3 uses JIT to generate the classes, how do I also include the classes in the Component library?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
对于1和2,看起来您的组件库可以导出a tailwind插件 一个消费项目将在他们的消费项目中注册自己的尾风配置。
plugin()
的第二个参数可以是您的组件Libary想要与用户的TailConfig配置合并的任何配置。例如
,将组件库作为包装发布时,请确保包含插件。
然后,在您的消费项目中:
对于3,看来您可能需要将组件库的组件的位置添加到
content
部分。例如,事物的实际途径将取决于您的项目融合,但希望您能理解这个想法。
For 1 and 2 it looks like your component library could export a Tailwind plugin that a consuming project would register in their own Tailwind config.
The second argument to
plugin()
can be any configuration your component libary wants to merge with the user's Tailconfig config.E.g.
When publishing your component library as a package, ensure the plugin is included.
Then, in your consuming project:
For 3, it looks like you might need to explicitly add the location of your component library's components to the
content
section. E.g.The actual paths to things will depend on your project strucutures, but hopefully you get the idea.
不久前,我必须完全做这件事,我们将汇总用于尾风组件库。我安装了copy插件进行汇总(来自他们的官方插件列表),在我的
crolup中。 config.js
我对此有所了解:因此,将该文件复制到我的输出中,然后在任何应用程序中使用该文件,都可以使用该文件:
它可以解决您的问题的#1和2。我记得在读到有关这件事的某个地方的支持,但不记得在哪里。您还可以在消费者应用程序中使用基本破坏性进行覆盖:
对于问题#3,我能够使用@harryg的方法仅添加
”。/node_modules/my-compontion/my-compond-library/dist /*。js“
到我的组件库中的我的tailwind.config.js,当我将该配置导入消费者应用程序时,它可以拾取所有所需的样式/类以编译而无需导出整个整个图书馆的尾灯样式表。希望这有所帮助。I had to do exactly this not too long ago and we used rollup for our tailwind component library. I installed the copy plugin for rollup (from their official plugin list) and in my
rollup.config.js
I had something to this effect:So that copied that file into my output and I use that in whichever application is consuming this library like so:
and that works to solve #1 and #2 of your questions. I remember reading about this being supported somewhere in Tailwind documentation but can't remember where. You can also do overriding in your consumer app with basic destructuring like so:
As for question #3, I was able to go with @harryg 's method of just adding
"./node_modules/my-component-library/dist/*.js"
to my tailwind.config.js in my component library and when I imported that config to the consumer app it was able to pick up all the needed styles/classes to compile without needing to export an entire tailwind stylesheet from the library. Hope this helped.我刚刚通过在DIST文件夹中提供配置来完成此操作:
./ src/assets/tailwind/config.js
./ tailwind.config.js
我也有一个执行此操作的汇总构建步骤:
./ build-meta.js
消费应用程序
I just accomplished this as part of a design system by providing the config in the dist folder:
./src/assets/tailwind/config.js
./tailwind.config.js
Also I have a rollup build step that executes this:
./build-meta.js
consuming applications