如何将 bit.dev 与 tailwindcss 结合使用

Question

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

Answer 1

有可能的。我设法做到了如下。（使用最新的 v15 - Bit Harmony）

在开始项目之前，请通过您的 Bit 配置文件设置集合：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. 在项目的根文件夹中定义您的范围（= profile.collection或organization.collection） ：workspace.jsonc

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

该文件中的其他所有内容都可以（应该？）保持不变。

6. 您必须创建一个文件夹，其中包含 Tailwind 的配置文件（Bit 不允许添加单个文件 - 仅限目录），例如tailwind-config/index.js
7. 将文件夹添加到 Bit 集合（即文件在本地跟踪）：bit add tailwind-config
8. 确保该文件的所有依赖项均已安装 ( npm install)
9. bit tag --all又名提交（正如我们从 git 中了解到的）
10. bit export又名推

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

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

module.exports = require('./node_modules/@your-profile/your-collection.tailwind-config')

我个人认为，这是拥有一致且实用的设计系统的好方法。

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

更新：初始化新拉取的存储库（包括.bitmap& workspace.jsonc）的最佳方法是使用bit import，然后npm install