Tailwind's default color palette is excellent and works well for the most part. However, I found myself configuring projects with the reasonable colors palette due to the easier accessibility reasonable colors offer. To avoid copying and pasting the same config over and over, I packaged this as a plugin. PRs open and contributions welcome 🍻
- Run
npm i tailwind-reasonable-colors
to install the package. - The package comes in two flavors:
enhance
andoverride
.-
enhance
adds the reasonable colors palette to the existing palette without causing clashes. All added colors come prefixed with anr
. Sopink
becomesrpink
and can be used, for example, viabg-rpink-400
. -
override
simply overwrites color names, but otherwise leaves the existing tailwind palette intact. -
enhanceFull
does the same thingenhance
does, but adds missing variations for 50, 700, 800 and 900 in the palette. Generated via https://color-scheme-builder.vercel.app. -
overrideFull
does the same thingoverride
does, but adds missing variations for 50, 700, 800 and 900 in the palette. Generated via https://color-scheme-builder.vercel.app.
-
// tailwind.config.js
const reasonable = require('tailwind-reasonable-colors');
module.exports = {
...
plugins: [
reasonable.enhance,
]
}
// tailwind.config.js
const reasonable = require('tailwind-reasonable-colors');
module.exports = {
...
plugins: [
reasonable.enhanceFull,
]
}
// tailwind.config.js
const reasonable = require('tailwind-reasonable-colors');
module.exports = {
...
plugins: [
reasonable.override,
]
}
// tailwind.config.js
const reasonable = require('tailwind-reasonable-colors');
module.exports = {
...
plugins: [
reasonable.overrideFull,
]
}
- https://reasonable.work/colors/ (also has an explanation on the reasoning behind the limited variations).