Janeene Beeforth
3905be67a9
* Set @headlessui/tailwindcss module type The distributed tailwindcss plugin package uses `.js` for esm files, and `.cjs` for commonjs files. This corresponds to `"type": "module"` in the package.json file. One build script `fix-types.js` was a commonjs script which was breaking this module file naming pattern. Renamed the script to `fix-types.cjs` so that we could then standardise the module type for @headlessui/tailwindcss package as a whole. * Fix esm import of tailwindcss/plugin ESM imports need to specify the filename extension when importing individual files. * update changelog --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
@headlessui/tailwindcss
A complementary Tailwind CSS plugin for Headless UI
Installation
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' })
],
}
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:
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>
)
}
Community
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: