\n A complementary Tailwind CSS plugin for Headless UI\n
\n\n
\n \n \n \n
\n\n## Installation\n\n```sh\nnpm install @headlessui/tailwindcss\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [\n require('@headlessui/tailwindcss')\n\n // Or with a custom prefix:\n require('@headlessui/tailwindcss')({ prefix: 'ui' })\n ],\n}\n```\n\n## Documentation\n\nUse Tailwind CSS utilities for styling the components based on their state. You can use the\nfollowing variants:\n\n| Variant | Inverse variant |\n| ------------------ | ---------------------- |\n| `ui-open` | `ui-not-open` |\n| `ui-checked` | `ui-not-checked` |\n| `ui-selected` | `ui-not-selected` |\n| `ui-active` | `ui-not-active` |\n| `ui-disabled` | `ui-not-disabled` |\n| `ui-focus-visible` | `ui-not-focus-visible` |\n\nExample:\n\n```js\nimport { Menu } from '@headlessui/react'\n\nfunction MyDropdown() {\n return (\n \n )\n}\n```\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)\n\nFor casual chit-chat with others using the library:\n\n[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)","users":{}}
![\"Total](\"https://img.shields.io/npm/dt/@headlessui/tailwindcss.svg\")
\n ![\"Latest](\"https://img.shields.io/npm/v/@headlessui/tailwindcss.svg\")
\n ![\"License\"](\"https://img.shields.io/npm/l/@headlessui/tailwindcss.svg\")
\n