DEV Community

Steve Polito
Steve Polito

Posted on • Updated on • Originally published at stevepolito.design

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';
Enter fullscreen mode Exit fullscreen mode
  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';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
angganegara profile image
Angga Negara

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

Collapse
 
stevepolitodesign profile image
Steve Polito

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