如何将bit.dev与tailwindcss一起使用

Question

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

Answer 1

这是可能的。我设法做到了如下所示。(使用最新的v15位和声)

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

使用用户名安装Bit的版本管理器软件包：npm i -g @teambit/bvm

• Install Bit：bvm install

• Log in using your username/

• ：bit login

• Initialize a Bit Harmony workspace in your project folder：bit init --harmony

• Define your scope (= profile.collection or organization.collection) in workspace.jsonc in your项目根文件夹：

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

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

确保文件夹中包含Tailwind的配置文件(Bit不允许添加单个文件-仅目录)，例如，将文件夹跟踪到Bit集合(即，文件是本地跟踪的)：bit add tailwind-config

• Make tailwind-config/index.js

• Add (npm install)

• bit tag --all

1. (确保该文件的所有依赖项都已安装)。提交(正如我们从git)
2. 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

Answer 2

因此，您应该考虑的一件事是component(s)的tailwind.config.js与项目中可能具有的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