Use color-mix to generate shades

[Mr-KayJayDee]

The current color palette generation process in Tailwind CSS relies on manual selection, which limits the available range of colors. While the existing method ensures meticulous balancing and testing, it can be time-consuming and restricts the number of shades to choose from.

I propose the addition of an automatic color shades generation feature to Tailwind CSS, leveraging the recently introduced CSS color-mix functionality. By incorporating this feature, Tailwind CSS would provide users with a more diverse and extensive palette of colors, facilitating precise color selection for their designs.

Example Usage:

The color-mix feature would empower users to effortlessly generate color shades between existing Tailwind CSS color classes. For instance, suppose a user desires a color between bg-red-400 and bg-red-500. They could utilize values like bg-red-450 or bg-red-425, where the last two numbers represent the desired percentage of red combined with white.

This functionality would grant users greater control over shade intensity and customization, enhancing the Tailwind CSS framework's versatility.

Resources:

MDN - color-mix
Tailwind CSS - Customizing Colors

[JavierM42]

I'll leave a link to #13085, I think this plugin I wrote could be useful as a starting point.

[timoxley]

Also https://uicolors.app/create