We're live-coding on Twitch! Join us!

Tailwind Opacity Utility Classes

Tailwind 1.4 just got released and with it comes three really cool things:

  1. Color opacity utlities
  2. Built-in PurgeCSS
  3. IE 11 target mode (experimental)

Let's take a look at the color opacity utilities. We already had the opacity class to set the opacity of an entire element.

  • opacity-{0|25|50|75|100}

The new classes will let us set opacity of certain attributes.

I've often wanted to set the opacity of the background of an element, but not the text of the element. This usually meant I had to write some custom CSS to create:

/_ black background at 10% opacity _/
background: rgba(0, 0, 0, 0.1);

Now we have the following classes to set various things!

The value can be 0, 25, 50, 75, 100

Here's an example:

<button class="text-red-100 bg-red-600 bg-opacity-75">
    my background is 75% opacity
</button>

Here's a CodePen for background opacity with Tailwind.

Not sure what the divide-opacity does though 🤷‍♂️

Like this article? Follow @chrisoncode on Twitter