A complementary Tailwind CSS plugin for Headless UI
npm install @headlessui/tailwindcss// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('@headlessui/tailwindcss')
// Or with a custom prefix:
require('@headlessui/tailwindcss')({ prefix: 'ui' })
],
}Use Tailwind CSS utilities for styling the components based on their state. You can use the following variants:
| Variant | Inverse variant |
|---|---|
ui-open |
ui-not-open |
ui-checked |
ui-not-checked |
ui-selected |
ui-not-selected |
ui-active |
ui-not-active |
ui-disabled |
ui-not-disabled |
ui-focus-visible |
ui-not-focus-visible |
Example:
import { Menu } from '@headlessui/react'
function MyDropdown() {
return (
<Menu>
<Menu.Button>More</Menu.Button>
<Menu.Items>
<Menu.Item>
<a
className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"
href="/account-settings"
>
Account settings
</a>
</Menu.Item>
{/* ... */}
</Menu.Items>
</Menu>
)
}For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using the library: