[英]How to use bit.dev with tailwindcss
I want to build a component library on top of tailwindcss.我想在 tailwindcss 之上构建一个组件库。 Therefore I want to encapsulate my components with bit.dev.
因此我想用 bit.dev 封装我的组件。 Is this possible, or are these two competitive approaches?
这是可能的,还是这两种竞争方法?
It is possible.有可能的。 I managed to do it as follows.
我设法做到了如下。 (Using latest v15 - Bit Harmony)
(使用最新的 v15 - Bit Harmony)
Before you get started with your project, set up a collection through your Bit profile: https://bit.dev/~create-collection在开始您的项目之前,请通过您的 Bit 配置文件设置一个集合: https://bit.dev/~create-collection
npm i -g @teambit/bvm
npm i -g @teambit/bvm
bvm install
bvm install
bit login
bit login
bit init --harmony
bit init --harmony
workspace.jsonc
in the root folder of your project:workspace.jsonc
中定义 scope(= profile.collection或organization.collection ): {
"defaultScope": "your-profile.your-collection"
}
Everything else in that file can (should?) stay the same.该文件中的其他所有内容都可以(应该?)保持不变。
tailwind-config/index.js
tailwind-config/index.js
bit add tailwind-config
bit add tailwind-config
npm install
)npm install
)bit tag --all
aka commit (as we know from git) bit tag --all
aka commit(我们从 git 知道)bit export
aka push bit export
又名推送The component should now appear in your collection and you can also reuse the Tailwind's config file across various projects using any package manager eg npm install @your-profile/your-collection.tailwind-config
该组件现在应该出现在您的集合中,您还可以使用任何 package 管理器在各种项目中重复使用 Tailwind 的配置文件,例如
npm install @your-profile/your-collection.tailwind-config
And lastly , add this to your tailwind.config.js
file:最后,将其添加到您的
tailwind.config.js
文件中:
module.exports = require('./node_modules/@your-profile/your-collection.tailwind-config')
I would personally say, this is a great way to have a consistent and functional design system.我个人会说,这是拥有一致且实用的设计系统的好方法。
For more information about Bit's inner workings, have a look at the documentation: https://harmony-docs.bit.dev/有关 Bit 内部工作原理的更多信息,请查看文档: https://harmony-docs.bit.dev/
UPDATE: The best way to initialise a freshly pulled repository (that includes .bitmap
& workspace.jsonc
) is using bit import
and then npm install
更新:初始化新拉的存储库(包括
.bitmap
和workspace.jsonc
)的最佳方法是使用bit import
,然后npm install
So one thing you should consider is the difference between the tailwind.config.js
's for your component(s)
and the tailwind.config.js
that you might have in your project.因此,您应该考虑的一件事是您的
component(s)
的tailwind.config.js
与您项目中可能拥有的tailwind.config.js
之间的区别。 As @stephen-j mentioned , you can also create a global tailwind.config.js that is shared across your projects.正如@stephen-j 提到的,您还可以创建一个在您的项目之间共享的全局 tailwind.config.js。
But, if you might have projects that need different configs.但是,如果您可能有需要不同配置的项目。 you can ensure that the component is more reusable, by adding an important class to the component's config.
您可以通过在组件的配置中添加重要的 class 来确保组件更具可重用性。
eg if you are making a button, ensure it has a class .button
, then in the tailwind config, ensure you set the important value to .button
例如,如果您正在制作一个按钮,请确保它有一个 class
.button
,然后在顺风配置中,确保将重要值设置为.button
// button.jsx
const Button = ({children}) => {
return (
<div className="button">
<button className="bg-primary">{children}</button>
</div>
)
}
// tailwind.config.js
module.exports = {
important:".button",
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors:{
primary:"#9333ea"
}
},
},
variants: {
extend: {},
},
plugins: [],
}
Using this method will export classes as .button.bg-primary
使用此方法会将类导出为
.button.bg-primary
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.