Fun with CSS variables and Tailwind
1 min read
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-[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.