如何在tailwindcss中使用bit.dev

问题描述

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

解决方法

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

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

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

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

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

您必须创建一个包含 Tailwind 配置文件的文件夹（Bit 不允许添加单个文件 - 仅允许添加目录）例如tailwind-config/index.js
将文件夹添加到 Bit 集合（即本地跟踪文件）：bit add tailwind-config
确保安装了该文件的所有依赖项 (npm install)
bit tag --all 又名提交（我们从 git 中知道）
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 内部工作原理的更多信息，请查看文档：{{3}}

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

因此，您应该考虑的一件事是您的 tailwind.config.js 的 component(s) 与您的项目中可能拥有的 tailwind.config.js 之间的区别。作为 @stephen-j mentioned，您还可以创建在您的项目之间共享的全局 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

bit.dev tailwind-css