Fun with CSS variables and Tailwind

Version 3 of Tailwind includes a plethora of new and awesome features. One of them is the ability to use arbitrary values and properties in your utility classes – this even works with CSS variables! Here's the example we're going to build today:

The top and bottom lines should grow from 0% to 100% width when you hover over the button. Let's start with the basic html for this component:

<button class="relative">
  <span class="absolute left-0 w-full h-1 bg-green-500 transition-all"></span>
  <div class="p-4">HOVER ME</div>
  <span class="absolute right-0 w-full h-1 bg-green-500 transition-all"></span>
</button>

So far so good. Next, let's use Tailwind's new bracket syntax to define and use a CSS variable called --fill that represents the width of the lines. To do that, add [--fill:0%] to the button element and replace w-full with w-[var(--fill)] in both span elements.

The final piece of the puzzle is updating the variable on hover. Tailwind makes this easy, just add hover:[--fill:100%] to the button element and you're done.

And here's the final result:

Pretty neat! I'm looking forward to exploring this technique more in the future. Let me know in the comments if you stumble across other use cases.