npm

@headlessui/tailwindcss
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

@headlessui/tailwindcss

A complementary Tailwind CSS plugin for Headless UI

Total Downloads Latest Release License

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:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server

Readme

Keywords

none

Package Sidebar

Install

npm i @headlessui/tailwindcss

Weekly Downloads

292,928

Version

0.2.1

License

MIT

Unpacked Size

10.7 kB

Total Files

10

Last publish

Collaborators

  • thecrypticace
  • reinink
  • adamwathan
  • malfaitrobin