radix-ui-tailwind-plugin v0.0.6

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:

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.