How to use bit.dev with tailwindcss

Question

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?

Answer 1

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

Before you get started with your project, set up a collection through your Bit profile: https://bit.dev/~create-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.

6. 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
7. Add the folder to the Bit collection (i.e. file is tracked locally): bit add tailwind-config
8. Make sure all dependancies of that file are installed (npm install)
9. bit tag --all a.k.a. commit (as we know from git)
10. bit export a.k.a. push

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

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.

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

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