JSPM – radix-ui-tailwind-plugin@0.0.6

Package Exports

radix-ui-tailwind-plugin

Readme

radix-ui-tailwind-plugin

A complementary Tailwind CSS plugin for Radix UI

Installation

npm install radix-ui-tailwind-plugin

// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('radix-ui-tailwind-plugin')

    // Or with a custom prefix:
    require('radix-ui-tailwind-plugin')({ prefix: 'rx' })
  ],
}

Documentation

Use Tailwind CSS utilities for styling the components based on their state. You can use the following variants:

Variant	Inverse variant
`radix-open`	`radix-not-open`
`radix-closed`	`radix-not-closed`
`radix-visible`	`radix-not-visible`
`radix-hidden`	`radix-not-hidden`
`radix-on`	`radix-not-on`
`radix-off`	`radix-not-off`
`radix-checked`	`radix-not-checked`
`radix-unchecked`	`radix-not-unchecked`
`radix-indeterminate`	`radix-not-indeterminate`
`radix-complete`	`radix-not-complete`
`radix-loading`	`radix-not-loading`
`radix-delayeed-open`	`radix-not-delayeed-open`
`radix-instant-open`	`radix-not-instant-open`
`radix-horizontal`	-
`radix-vertical`	-
`radix-active`	-
`radix-disabled`	-
`radix-highlighted`	-
`radix-placeholder`	-

Example:

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

function MyDropdown() {
    return (
        <DropdownMenu.Root>
            <DropdownMenu.Trigger className="radix-open:bg-gray-100 radix-disabled:cursor-auto radix-disabled:bg-gray-100">
                More
            </DropdownMenu.Trigger>

            <DropdownMenu.Content className="radix-open:shadow-xl radix-side-bottom:bottom-0 radix-side-bottom:translate-y-full">
                <DropdownMenu.Item>
                    <a
                        className="radix-checked:text-blue-600 radix-highlighted:bg-blue-500 radix-highlighted:text-white radix-disabled:text-gray-500"
                        href="/account-settings">
                        Account settings
                    </a>
                </DropdownMenu.Item>
                {/* ... */}
            </DropdownMenu.Content>
        </DropdownMenu.Root>
    );
}

Credits

All the credit goes to @tailwindlabs! This plugin was inspired by @headlessui/tailwindcss.