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:
- 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";
npm i tailwind-color-paletteor
yarn add 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.
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";