0.2.1 • Published 8 months ago

@headlessui/tailwindcss v0.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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:

VariantInverse variant
ui-openui-not-open
ui-checkedui-not-checked
ui-selectedui-not-selected
ui-activeui-not-active
ui-disabledui-not-disabled

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

rtu-components-2@yamcodes/ui@everything-registry/sub-chunk-389bot-test-purpose2grk-lol@toantranmei/mei-nuxt3-ui@dominic-erp/nuxt-ui@dripui/react@creation-ui/core@creation-ui/react@cookbookdev/coreum@cookbookdev/docsbotspin-next-modules@douglasneuroinformatics/uistn-uitremor2axistremorv3devtest@angsanley/nuxt-ui@aeonkit/react@agility/plenum-ui@binhtranhuu/nuxt-ui@billes-tryckeri/poff-components@choutianxius/tremor@cloud-party/ui@abalonperin/tremor@abusix/hailstorm@colisweb/rescript-toolkit@crhio/concrete@dappworks/urpc-uiupsolve-labs-tremor@gseller-monorepo/area-chart@flnt-accurait/web-components@foundry360/ui@huyoukeji/ui-edge@lightdotso/tailwindcss@lechihuy/gennote-react@metrito/tremor-react@mosqueicu/react@newsunenergy/components@king0120/tremor@jansora/ui@joshunrau/ui@jetfly/ui@offchainlabs/cobalt@raralabs/components@salfatigroup/tailwind-config@scalar/client-app@scalar/api-client@obewds/vueventus@nuxt/ui-edge@opuspac/ui@panalyt/tremor@pacely-next/uinuxt-ui-customnxt-uipayload-richtext-tiptappayload-richtext-tiptap-kaledarrpv-uirtu-componentsreact-brickssalim-fuelsalim-ui-kithotelblockstestgyles-uiladministration-vue-hookkubsknowledgebase-pockoro-tools@while-and-for/tremor-react@trytrench/tremor@topsort/tremor@toantranmei/ui@switchdreams/ui@the_human_cipher/components-library@uoguelph/react-components@upsolve-labs/tremor@yaelg/nuxt-ui@zenuml/core@tahul/ui@zulustation/uiadd-to-calendar-button-demoadata-ui-v2chat-nextpyccsfasswea-uiclada-storybookcreate-cross-archcreate-exo-frontend-templateblockauth-sdk-reactbecool-uiblockauth-lib-reactdewcobaltdimo-design-systemdropuiembeddable-analyticsfrolic-reactgen-ai-bot
0.2.1

1 year ago

0.2.0

2 years ago

0.1.3

2 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago