[Feature request] Tailwind 1.4.0 support - new color opacity utilities

[AndrewBogdanovTSS]

After TailwindCSS introduced new color opacity utilities current approach of opacity and colors generation became not inlined with the official way colors are generated in tailwindCSS. As a result classes such as bg-opacity-25, text-opacity-25 makes no difference to the opacity level.

@hawezo I actually have mixed feelings about 1.4.0 color utilities and I like how you implemented it - more, but what can we do here? I guess when using tailwind-theming we should still have an access to full list of tailwind features. But what is really great about your approach with colors is that it's fully polyfillable for IE11 and 1.4.0 colors - are not. So maybe let's discuss what is the best thing that should be done here

[innocenzi]

So, this if fixable with a change on Tailwind's core, but that would be a bit hacky, not sure if Adam would be open to this. I asked him on the Discord and tagged you.

If it's not possible to do that, the best bet would be to disable Tailwind's opacity utilities' implementation.

---

EDIT - Actually I've found a better solution and I think Adam would like it better. Same principle but different implementation.

[innocenzi]

https://github.com/tailwindcss/tailwindcss/pull/1676#issuecomment-622277441

---

@AndrewBogdanovTSS Answering there, because the PR wasn't the place.

Normally, that would eventually be polyfillable, since I plan on generating that type of utility:

.text-primary-75 {
  color: rgba(32, 32, 32, var(--text-opacity, 0.75));
}

Where --text-opacity is used by Tailwind's opacity utilities, and .75 is the default value, defined by the plugin's variant.

Ran through postcss-custom-properties, it gives the following CSS:

.text-primary-75 {
  color: rgba(32, 32, 32, 0.75);
  color: rgba(32, 32, 32, var(--text-opacity, 0.75));
}

If I need to use a CSS variable instead of a hard-coded value for some reason, I can have a double fallback which polyfills the same:

/* Generated */
.text-primary {
  color: rgba(32, 32, 32, var(--text-opacity, var(--color-primary-opacity-variant, 0.75)));
}

/* Polyfilled */
.text-primary-75 {
  color: rgba(32, 32, 32, 0.75);
  color: rgba(32, 32, 32, var(--text-opacity, var(--color-primary-opacity-variant, 0.75)));
}

Basically, we can do text-primary-75, which will work as expected, and things like text-primary-75 text-opacity-100 which will have an opacity of 1 on modern browsers but will fallback to 75 on IE.

Does that answer your concerns?

[AndrewBogdanovTSS]

Ok, so in order to have IE11 support we will have to stick to using utilities such as .text-primary-75 instead of .text-primary text-opacity-75 right?

[innocenzi]

Exactly.

[AndrewBogdanovTSS]

I can live with that 😄

[MrMacStripe]

Hey @innocenzi do you still need help on this feature?

[innocenzi]

Hey, it's in stand-by right now because I don't have time for this, unfortunately. Even if you PR'd it, I would probably not have the time to review and test it either... I hope to be able to get back to this project in the coming months, I need to tag @next to @latest as well. In the meantime, sorry, you'll have to do without this feature or use one of the other theming plugins :(

[MrMacStripe]

Thanks for the quick answer. I love the approach of your plugin and don't plan to ditch it. I'll have a look and let you know if I can provide a solution down the road.