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 🤷‍♀️

A couple of useful examples in the readme of what you can achieve with it pic.twitter.com/TXjwqhmEGy

— Liam Hammett (@LiamHammett) February 13, 2019

You can find the plugin over at GitHub.

GitHub - imliam/tailwindcss-open-variant: Open variant for Tailwind CSS

Open variant for Tailwind CSS. Contribute to imliam/tailwindcss-open-variant development by creating an account on GitHub.

github.com