I want to make SASS Mixins for my color scheme in the tailwind style.
For every color I want to generate a 400, 300, 200 and 100 and so on version.
Now it would be nice to know in what percentage tailwind steps this.
I found nothing in the internet to this issue.
I actually use https://javisperez.github.io/tailwindcolorshades/#/ to generate shades it will output something like:
concrete: {
100: '#FEFEFE',
200: '#FCFCFC',
300: '#FAFAFA',
400: '#F6F6F6',
500: '#F2F2F2',
600: '#DADADA',
700: '#919191',
800: '#6D6D6D',
900: '#494949',
},
That you can include in your tailwind.config.js file.
Tailwind's default colors are all handpicked, they do not have a tool to generate color palettes, so you would have to do the same.
From the docs:
Generating custom color palettes
A common question we get is "how do I generate the 100–900 shades of my own custom colors?".
Bad news: color is complicated and we've yet to find a tool that does a good job generating these sorts of color palettes. We picked all of Tailwind's default colors by hand, balancing them by eye. Sorry!
I found this figma plugin: https://www.figma.com/community/plugin/815578663120885543/Tailwind-Color-Generator
That generates the custom color palette for you to use in your designs and then you can export it into your SCSS Files - the result should be the same.
