Add Tailwind CSS Color Palette to Bootstrap

You might be wondering why anyone would want to add Tailwind’s default color palette to Bootstrap. It comes down to personal preference, but below are the key reasons I think this is beneficial.

Why adding the Tailwind color palette to Bootstrap is beneficial:

1. Tailwind is only a CSS framework. It doesn’t come with battle tested, commonly used JavaScript components like modals or tabs.
   1. I know TailwindUI ships with a lot of components, but this does not include JavaScript. More importantly, Bootstrap has already accounted for edge cases and accessibility. Why reinvent the wheel?
2. Bootstrap ships with base styles, whereas Tailwind does not.
3. Bootstrap already ships with utility classes.
4. Bootstrap’s color palette is very limited, whereas Tailwind’s color palette is extensive.

How to extend Bootstrap by adding the Tailwind color palette

1. Import Bootstrap and its default variables.

   // some-file.scss
   @import "~bootstrap/scss/bootstrap";
   

2. Run npm i tailwind-color-palette or yarn add tailwind-color-palette.

3. Import tailwind-color-palette.

   // some-file.scss
   // ℹ️ Import the file
   @import "~tailwind-color-palette/scss/tailwind-color-palette";
   @import "~bootstrap/scss/bootstrap";
   

   Now you have access to background color utility classes and text color utility classes.

4. Optionally override Bootstrap’s variables.

   // some-file.scss
   @import "~tailwind-color-palette/scss/tailwind-color-palette";
   // ℹ️ Optionally override Bootstrap's variables
   $primary: map-get($tw_indigo, 900);
   @import "~bootstrap/scss/bootstrap";