Add color operations to create contrasting colors for components.

[TristanBrotherton]

When building a reusable component you may choose to build elements of it using your default color, and want to have contrasting color based off of that color. In LESS and SASS we can use functions like Complement or Invert.

[nathangross]

I'll just jump in here to add a bit. I would also love to see more ways to manipulate colors with tailwind. I'm just now learning about relative colors in css (ref: https://blog.jim-nielsen.com/2021/css-relative-colors/ and https://www.stefanjudis.com/notes/new-in-css-relative-colors/). So it appears that we can do many things that sass and less gave us. I'm just not sure if this is already possible in tailwind or if it would need to be supported.

I did try the following to no avail

backgroundColor: {
    action: {
        DEFAULT: "rgb(from var(--color) rgba(0, 0, 0, 1.0))",
            hover: "hsl(from var(--color) h s calc(l + 10%))",
    },
},

[nathangross]

It didn't work because this is not available in browsers yet 😅

https://chromestatus.com/feature/5659115386830848

I would imagine this is how tailwind would "support" sass-like color functions.

[Carljosia]

Is there right now a Solution to this issue? I have a relative issue. myLoyola Sign In