Tailwind 1.4 just got released and with it comes three really cool things:
Let's take a look at the color opacity utilities. We already had the opacity class to set the opacity of an entire element.
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
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