A plugin to create accessible, JavaScript free dropdowns with Tailwind CSS. This is not a component (although you can use the examples below as a blueprint).
## 💿 Install
```sh
npm install tailwindcss-dropdown
```
In `tailwind.config.js` add `dropdown` to your `display` variants and require the plugin, like this:
```js
module.exports = {
theme: {},
variants: {
display: ['responsive', 'dropdown']
},
plugins: [require('tailwindcss-dropdown')],
}
```
## 🚀 Usage
This plugin adds `dropdown` as a variant for `display` utilities. Translating: you can use `dropdown:block` to change the `display` of a child `ul` to `block` (or any other property listed [here](https://tailwindcss.com/docs/display/#app))
It depends heavily on the structure of your HTML. eg:
```html
```
Note that `dropdown:block` must contain a `ul` as child. The same could be done with a `button`:
```html
```
## 🧙♂️ How it works?
The code for `dropdown:block` (and for every other display value, like `dropdown:grid`, etc) will look like this:
```css
.dropdown\:block:focus-within > ul {
display: block;
}
```
So, when the element with class `dropdown:block` has focus within, the `ul` inside it turns into a `block`.
