tailwindcss-dropdown

Tailwind CSS Dropdown

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

npm install tailwindcss-dropdown

In tailwind.config.js add dropdown to your display variants and require the plugin, like this:

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)

It depends heavily on the structure of your HTML. eg:

<ul class="flex space-x-6" role="navigation">
  <li><a href=#>Home</a></li>
  <li><a href=#>Support</a></li>
  <!-- 1) dropdown:block -->
  <li class="relative dropdown:block" aria-haspopup="true">
    <a href=#>Products</a>
    <!-- 2) will transform this ul in a block when focused -->
    <ul class="hidden absolute right-0 w-auto" aria-label="submenu">
      <li><a href=#>macOS</a></li>
      <li><a href=#>Windows</a></li>
    </ul>
  </li>
</ul>

Note that dropdown:block must contain a ul as child. The same could be done with a button:

<!-- 1) dropdown:block -->
<button class="relative dropdown:block" role="navigation" aria-haspopup="true">
  Products
  <!-- 2) will transform this ul in a block when focused -->
  <ul class="absolute right-0 hidden w-auto" aria-label="submenu">
    <li><a href="#">macOS</a></li>
    <li><a href="#">Windows</a></li>
  </ul>
</button>

🧙‍♂️ How it works?

The code for dropdown:block (and for every other display value, like dropdown:grid, etc) will look like this:

.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.