3

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

4

2 回答 2

2

有可能的。我设法做到了如下。（使用最新的 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"
  }

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

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

于 2021-04-28T13:55:40.380 回答
1

所以你应该考虑的一件事是你的 '和你在项目中可能拥有的tailwind.config.js'之间的区别。正如@stephen-j 提到的，您还可以创建一个在您的项目之间共享的全局 tailwind.config.js。component(s)tailwind.config.js

但是，如果您可能有需要不同配置的项目。您可以通过在组件的配置中添加一个重要的类来确保组件更具可重用性。

例如，如果您正在制作一个按钮，请确保它有一个类.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: [],
}

使用此方法会将类导出为.button .bg-primary

于 2021-06-26T10:38:28.350 回答