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:
- Tailwind is only a CSS framework. It doesn't come with battle tested, commonly used JavaScript components like modals or tabs.
- 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?
- Bootstrap ships with base styles, whereas Tailwind does not.
- Bootstrap already ships with utility classes.
- Bootstrap's color palette is very limited, whereas Tailwind's color palette is extensive.
How to extend Bootstrap by adding the Tailwind color palette
- Import Bootstrap and its default variables.
// some-file.scss
@import '~bootstrap/scss/bootstrap';
- Run
npm i tailwind-color-palette
oryarn add tailwind-color-palette
. - 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.
- 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.
Top comments (2)
very nice! do you have plan to add border-color as well?
Great suggestion! I hadn't even considered that, but will open an issue on GitHub so I don't forget.