huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update README

Browse Source
This commit is contained in:
Robin Malfait
2022-05-24 23:30:17 +02:00
parent e5d4b4e7f9
commit 0a81444448
2 changed files with 88 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5 -4
View File
@@ -31,10 +31,11 @@ You can install the insiders version (which points to whatever the latest commit
## Packages
| Name | Version | Downloads |
| :------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: |
| [`@headlessui/react`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react) | [![npm version](https://img.shields.io/npm/v/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) |
| [`@headlessui/vue`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue) | [![npm version](https://img.shields.io/npm/v/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) |
| Name | Version | Downloads |
| :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: |
| [`@headlessui/react`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react) | [![npm version](https://img.shields.io/npm/v/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) |
| [`@headlessui/vue`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue) | [![npm version](https://img.shields.io/npm/v/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) |
| [`@headlessui/tailwindcss`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) | [![npm version](https://img.shields.io/npm/v/@headlessui/tailwindcss.svg)](https://www.npmjs.com/package/@headlessui/tailwindcss) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/tailwindcss.svg)](https://www.npmjs.com/package/@headlessui/tailwindcss) |
## Community
packages/@headlessui-tailwindcss/README.md
+83
View File
@@ -0,0 +1,83 @@
<h3 align="center">
@headlessui/tailwindcss
</h3>
<p align="center">
A complementary Tailwind CSS plugin for Headless UI
</p>
<p align="center">
<a href="https://www.npmjs.com/package/@headlessui/tailwindcss"><img src="https://img.shields.io/npm/dt/@headlessui/tailwindcss.svg" alt="Total Downloads"></a>
<a href="https://github.com/tailwindlabs/headlessui/releases"><img src="https://img.shields.io/npm/v/@headlessui/tailwindcss.svg" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/headlessui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/tailwindcss.svg" alt="License"></a>
</p>
## 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` |
Example:
```js
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:
[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)