Add rgb and hsl color helpers for CSS variables

[thecrypticace]

This adds two new helpers that can be used to simplify using colors that are CSS variables. The colors MUST use the space separated syntax, and MUST NOT use an alpha channel in their value as Tailwind CSS adds that itself. The user can customize the alpha by using the opacity modifier syntax for colors (e.g. the /50 in text-primary/50).

The rgb and hsl functions only expect the name of a CSS variable / custom property at present. We may revisit this in the future but this will give those who are using CSS variables a nicer, terse syntax for defining their config in a way that works with placeholders, borders, rings, etc…

// tailwind.config.js
module.exports = {
  theme: {
    colors: ({ rgb, hsl }) => ({
      primary: rgb('--color-primary'),
      secondary: hsl('--color-secondary'),
      // ...
    })
  }
}

Closes #4659
Fixes #3953

[bakura10]

This is an awesome addition. Would it be possible to add a second parameter to the RGB specifying the default opacity? This way it would allow us to define variables like this:

'border': rgb('--text-color', 0.15),

Thanks!

[tylerrrkd]

Hi, friend, I wanna use rgb function but it throw an error Error: rgb is not a function and my config is below. Is there any wrong?

...
      colors: ({ rgb }) => ({
        primary: rgb("var(--color-primary)"),
        secondary: rgb("var(--color-secondary)"),
      }),
...

ooops, my tailwindcss version is ^3.3.0