如何在tailwindcss中使用bit.dev [英] How to use bit.dev with tailwindcss

问题描述

我想在tailwindcss之上构建一个组件库.因此我想用 bit.dev 封装我的组件.这是可能的，还是这两种竞争方式?

I want to build a component library on top of tailwindcss. Therefore I want to encapsulate my components with bit.dev. Is this possible, or are these two competitive approaches?

推荐答案

这是可能的.我设法做到了如下.(使用最新的 v15 - Bit Harmony)

It is possible. I managed to do it as follows. (Using latest v15 - Bit Harmony)

在开始您的项目之前，请通过您的 Bit 配置文件设置一个集合:https://bit.dev/~create-collection

Before you get started with your project, set up a collection through your Bit profile: https://bit.dev/~create-collection

1. 安装Bit的版本管理器包:npm i -g @teambit/bvm
2. 安装位:bvm install
3. 使用您的用户名/电子邮件登录:bit login
4. 在您的项目文件夹中初始化一个 Bit Harmony 工作区:bit init --harmony
5. 在项目根文件夹的 workspace.jsonc 中定义范围(= profile.collection 或 organization.collection):

1. Install Bit's version manager package: npm i -g @teambit/bvm
2. Install Bit: bvm install
3. Log in using your username/email: bit login
4. Initialize a Bit Harmony workspace in your project folder: bit init --harmony
5. Define your scope (= profile.collection or organization.collection) in workspace.jsonc in the root folder of your project:

  {
    "defaultScope": "your-profile.your-collection"
  }

该文件中的其他所有内容都可以(应该?)保持不变.

Everything else in that file can (should?) stay the same.

1. 您必须创建一个包含 Tailwind 配置文件的文件夹(Bit 不允许添加单个文件 - 仅允许添加目录)例如tailwind-config/index.js
2. 将文件夹添加到 Bit 集合中(即本地跟踪文件):bit add tailwind-config
3. 确保安装了该文件的所有依赖项(npm install)
4. bit tag --all 又名提交(我们从 git 中知道)
5. 位导出又名推

1. You will have to create a folder with the Tailwind's config file inside (Bit doesn't allow adding single files - only directories) e.g. tailwind-config/index.js
2. Add the folder to the Bit collection (i.e. file is tracked locally): bit add tailwind-config
3. Make sure all dependancies of that file are installed (npm install)
4. bit tag --all a.k.a. commit (as we know from git)
5. bit export a.k.a. push

该组件现在应该出现在您的集合中，您还可以使用任何包管理器在各种项目中重复使用 Tailwind 的配置文件，例如npm install @your-profile/your-collection.tailwind-config

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 e.g. npm install @your-profile/your-collection.tailwind-config

最后，将其添加到您的 tailwind.config.js 文件中:

And lastly, add this to your tailwind.config.js file:

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.

有关 Bit 内部工作原理的更多信息，请查看文档:https://harmony-docs.bit.dev/

For more information about Bit's inner workings, have a look at the documentation: https://harmony-docs.bit.dev/

更新: 初始化新提取的存储库(包括 .bitmap 和 workspace.jsonc)的最佳方法是使用 bit import 然后 npm install

UPDATE: The best way to initialise a freshly pulled repository (that includes .bitmap & workspace.jsonc) is using bit import and then npm install

这篇关于如何在tailwindcss中使用bit.dev的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！