@headlessui/tailwindcss
A complementary Tailwind CSS plugin for Headless UI
## Installation
```sh
npm install @headlessui/tailwindcss
```
```js
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('@headlessui/tailwindcss')
// Or with a custom prefix:
require('@headlessui/tailwindcss')({ prefix: 'ui' })
],
}
```
## Documentation
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:
```js
import { Menu } from '@headlessui/react'
function MyDropdown() {
return (
)
}
```
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)
For casual chit-chat with others using the library:
[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)