Add opacity modifiers for color utilities

[adamwathan]

This PR adds new utilities for controlling just the alpha channel of colors:

• bg-opacity-{value}
• text-opacity-{value}
• border-opacity-{value}
• divide-opacity-{value}
• placeholder-opacity-{value}

These utilities compose with the existing color utilities like this:

<div class="bg-red-500 bg-opacity-25">
  <!-- ... -->
</div>

Under the hood, this works by adjusting all of the existing color utilities to respect a CSS Custom Property for the alpha channel:

/*  Before */
.bg-red-500 {
  background-color: #f56565
}

/* Now */
.bg-red-500 {
  --bg-opacity: 1;
  background-color: #f56565;
  background-color: rgba(245, 101, 101, var(--bg-opacity));
}

The opacity modifier utilities then simply change the value of the corresponding custom property:

.bg-opacity-25 {
  --bg-opacity: 25;
}

Each existing color utility resets the corresponding custom property back to 1 to ensure no unexpected inheritance issues, and the opacity modifers are all declared after their corresponding color utilities to ensure they take precedence.

I've kept the non-custom property version of each color in the ruleset to ensure backwards compatibility for people who need IE11 support, but we may drop this in a future major version and encourage people to use postcss-custom-properties to generate those fallback values if needed.

All of these new utilities inherit their values from the opacity config by default but can be configured independently under the following theme keys:

• backgroundOpacity
• textOpacity
• borderOpacity
• placeholderOpacity
• divideOpacity

I have deliberately left out support for fillOpacity and strokeOpacity because SVG elements already have an opacity attribute, but we can always add these in the future if people think they are valuable.

Each new utility uses the same variants as its corresponding color utility by default.

[benface]

Nice! Awesome to see Tailwind using the power of custom properties more and more. Any chance you’d be interested in shadow-color-{value} utilities?

[adamwathan]

Nice! Awesome to see Tailwind using the power of custom properties more and more. Any chance you’d be interested in shadow-color-{value} utilities?

@benface, yeah this is something I would be open to talking about for sure, but I don't have a clear picture in my head of what it would look like. Want to open an issue with some of your initial thoughts around the problems it solves, what the default colors would be, etc.?

[benface]

@adamwathan Cool, looks like someone already opened an issue not too long ago: #1463

[randallmlough]

This is an awesome feature! I finally get to remove my helper plugin for this 🎉

@adamwathan can this somehow be used for gradients?

I have a custom css class that pulls in an extended theme colors at a specific alpha level

.highlight-yellow{
    background-image: linear-gradient( -100deg,theme('colors.yellow.a15'),theme('colors.yellow.a80') 100%,theme('colors.yellow.a25') );
}

Is it possible to no longer need theses custom properties and instead leverage this through a helper function like theme()? My thinking is it may not be possible (at least yet) since I need more than 1 alpha/opacity levels for one css property.

[richardthombs]

Not only are you saving me hours and hours of work with the awesome tailwindcss library, but you are teaching me CSS as well. I had no idea that CSS variables could do that! 👏

[AndrewBogdanovTSS]

@adamwathan does this merge change how theme() function is working? U use it like so:

* {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.grey.default') theme('colors.white.default');
  }

and it's no longer working

[AndrewBogdanovTSS]

After looking a bit deeper I have a question, is it correct that in IE11 any opacity colors wouldn't be possible to use?

[adamwathan]

@AndrewBogdanovTSS Nothing about the theme function has changed, at least not intentionally and our tests for it our passing. Can you create a repository that reproduces the issue and open a new issue?

You're right that the new color opacity features are not compatible with IE11 👍

[AndrewBogdanovTSS]

@vricop what is it and how it's related to the topic?

[AndrewBogdanovTSS]

@vricop I don't understand how it should improve anything?