TailwindCSS <details> plugin
I built a nice looking and fully accessible dropdown menu by using the native <details>
HTML tag without a drop of JavaScript in the client.
A little more polish to get the alignment and colours sorted out, as well as flipping the caret on open — just a couple of years ago it would've been completely unthinkable to build an accessible dropdown component like that without the use of JavaScript pic.twitter.com/qPaygfh29p
— Liam Hammett (@LiamHammett) January 30, 2019
To build it in a utility-first approach, I created a simple plugin for TailwindCSS.
Just published my first npm package - that small three-line Tailwind Plugin to apply styles when a <details> tag is opened 🤷♀️
— Liam Hammett (@LiamHammett) February 13, 2019
A couple of useful examples in the readme of what you can achieve with it pic.twitter.com/TXjwqhmEGy
You can find the plugin over at GitHub.