Alpha utilities do not apply to HSL colors using space-separated notation

[htunnicliff]

What version of Tailwind CSS are you using?

v2.2.0

What build tool (or framework if it abstracts the build tool) are you using?

Next.js v11.0.0

What version of Node.js are you using?

v15.2.1

What browser are you using?

Firefox

What operating system are you using?

macOS 11.4 (Big Sur)

Reproduction repository

https://github.com/htunnicliff/tailwind-hsl-issue

Describe your issue

Colors that are defined in tailwind.config.js that use space-separated HSL notation are not handled correctly when used with color modification utilities like bg-opacity-{n} or text-opacity-{n}.

For example, if I add the same color using the the two notation styles to my config:

• evergreen-spaces: hsl(152 75% 40%) (uses space-separated HSL notation)
• evergreen-commas: hsl(152, 75%, 40%) (uses comma-separated HSL notation)

And then I use those colors in conjunction with background and text opacity utilities:

export default function Index() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen space-y-8 text-white max-w-md text-center mx-auto">
      <div className="bg-evergreen-spaces bg-opacity-50 p-6 rounded-lg w-full">
        <code>hsl(152 75% 40%)</code> + <code>.bg-opacity-50</code>
      </div>
      <div className="bg-evergreen-commas bg-opacity-50 p-6 rounded-lg w-full">
        <code>hsl(152, 75%, 40%)</code> + <code>.bg-opacity-50</code>
      </div>
      <div className="text-evergreen-spaces text-opacity-50 p-6 rounded-lg w-full border">
        <code>hsl(152 75% 40%)</code> + <code>.text-opacity-50</code>
      </div>
      <div className="text-evergreen-commas text-opacity-50 p-6 rounded-lg w-full border">
        <code>hsl(152, 75%, 40%)</code> + <code>.text-opacity-50</code>
      </div>
    </div>
  );
}

This is the result:

As you can see, the comma-separated HSL values have their opacity changed, while the space-separated HSL values do not change.

Since space-separated HSL values are supported by evergreen browsers, it seems like Tailwind should support them as well.

[htunnicliff]

Fixing this issue appears to require a couple of steps:

✅ 1. Refactor HSL parsing in color-string to support spaces

Since tailwind depends on color for color parsing, and color uses color-string to actually parse color strings, color-string needs to be updated to support this type of HSL value.

I have submitted a pull request for color-string (Qix-/color-string#55) that will enable correct parsing of space-separated HSL color strings.

👉 This PR was merged in v1.6.0.

✅ 2. Update color dependencies to use the newer version of color-string

Once the pull request for color-string is (hopefully 🤞) accepted, color will need to update its own color-string dependency to use the version incorporating the space-separated HSL support.

👉 color updated its dependencies to include color-string@1.6.0. The latest version is now color@4.0.0

3. Update tailwindcss to support space-separated HSL colors

tailwindcss will needs to update its own color dependency to v4.0.0.

withAlphaVariable.js appears to need some refactoring in order to support space-separated HSL values, both with and without an alpha.

There may be other files that need updating as well – as I find them, I will try to add them here.

[htunnicliff]

@adamwathan I added a PR that enables space-separated HSL color values: #5003. It is a surprisingly small diff!