# @headlessui/tailwindcss

> A complementary Tailwind CSS plugin

Latest version **0.2.2** (published 2025-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @headlessui/tailwindcss
pnpm add @headlessui/tailwindcss
yarn add @headlessui/tailwindcss
bun add @headlessui/tailwindcss
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2025-02-06 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 28750 |
| Maintainers | reinink, thecrypticace, adamwathan, malfaitrobin |

## Links

- npm: https://www.npmjs.com/package/@headlessui/tailwindcss
- Repository: https://github.com/tailwindlabs/headlessui
- Homepage: https://github.com/tailwindlabs/headlessui#readme
- Issues: https://github.com/tailwindlabs/headlessui/issues
- npm.io page: https://npm.io/package/@headlessui/tailwindcss

## Recent versions

- 0.2.2 (latest) — 2025-02-06
- 0.0.0-insiders.eea57cf (insiders) — 2026-04-13
- 0.0.0-insiders.d13526d — 2026-04-07
- 0.0.0-insiders.b0dcd8f — 2026-04-07
- 0.0.0-insiders.7baca70 — 2025-12-04
- 0.0.0-insiders.5ef7395 — 2025-11-27
- 0.0.0-insiders.589ea90 — 2025-09-25
- 0.0.0-insiders.ca536ed — 2025-09-25
- 0.0.0-insiders.2a647a7 — 2025-09-25
- 0.0.0-insiders.da2fa94 — 2025-09-25
- 0.0.0-insiders.6b5709a — 2025-09-19
- 0.0.0-insiders.433b174 — 2025-09-18
- 0.0.0-insiders.31b3e47 — 2025-09-18
- 0.0.0-insiders.b0615ad — 2025-09-17
- 0.0.0-insiders.f96538e — 2025-09-17
- … 525 more at https://npm.io/package/@headlessui/tailwindcss/versions

## README

<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`      |
| `ui-focus-visible` | `ui-not-focus-visible` |

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)

---
_Source: https://npm.io/package/@headlessui/tailwindcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._