deebov / radix-ui-tailwind-plugin

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.