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.
- Import tailwind-color-palette.
// some-file.scss @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'; $primary: map-get($tw_indigo, 900);@import '~bootstrap/scss/bootstrap';