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

Answer 2

So one thing you should consider is the difference between the tailwind.config.js's for your component(s) and the tailwind.config.js that you might have in your project. As @stephen-j mentioned, you can also create a global tailwind.config.js that is shared across your projects.

But, if you might have projects that need different configs. you can ensure that the component is more reusable, by adding an important class to the component's config.

e.g. if you are making a button, ensure it has a class .button, then in the tailwind config, ensure you set the important value to .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: [],
}

Using this method will export classes as .button .bg-primary