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.
- 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.
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";
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";