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

#css #html #tailwind