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!

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

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

Here's an example:

<button>
    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