Add Tailwind CSS Color Palette to Bootstrap

• tailwind-color-palette package
• Demo

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';

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

// some-file.scss
@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.

1. Optionally override Bootstrap's variables.

// some-file.scss
@import '~tailwind-color-palette/scss/tailwind-color-palette';
$primary: map-get($tw_indigo, 900);
@import '~bootstrap/scss/bootstrap';

---

Did you like this post? Follow me on Twitter to get even more tips.

Comments

[Angga Negara]

very nice! do you have plan to add border-color as well?

[Steve Polito]

Great suggestion! I hadn't even considered that, but will open an issue on GitHub so I don't forget.