Preserving HSL colors instead of converting to RGBA (eliminates colors on older browsers)

[andronocean]

I'm using HSL color definitions in a project instead of RGB/hex. With Tailwind 2.0, the hsl() values in my tailwind.config.js get converted to rgba() rules (so the opacity classes can work their dark magic). However, because HSL -> RGB isn't a simple add/subtract swap, the resulting CSS uses floats for each color channel:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      offblack: 'hsl(205,95%,2%)'
} } }

/* resulting CSS */
.text-offblack {
    --tw-text-opacity: 1;
    color: rgba(.2550000000000002,5.907499999999999,9.945,var(--tw-text-opacity));
}

The trouble with this is that browser support for floats in rgba wasn't good until the last couple years. That means people with older browsers (something like 5% of traffic) will see NO COLORS AT ALL on my site with Tailwind 2.0 — everything is black and white.

Is there a way to make Tailwind keep HSL values and output hsla() colors instead of rgba()?

If not, is there any way to disable the opacity conversion functions and go back to how Tailwind 1.9 handled colors (output exactly as defined)?

Or do I just need to go back to 1.9 entirely? 😢

I love Tailwind (best CSS framework I've ever touched!), but it really seems like color utilities ought to be built in a more backward-compatible way with progressive enhancement in mind.

[adamwathan]

Hey thanks for raising this! I think this is something we can improve for sure — do you want to open this as an issue instead so we don't lose track of it? I think we can definitely preserve the HSL stuff, should be no problem.

[andronocean]

Awesome — will do! (Figured I'd post here first in case there was an easy toggle.)

Edit: issue opened