TailwindCSS Radix

Utilities and variants for styling Radix state

Installation

yarn

yarn add tailwindcss-radix

npm

npm i tailwindcss-radix

Usage

You can find the demo dropdown menu inside the demo folder.

Add the plugin to your plugins array:

module.exports = {
  theme: {
    // ...
  },
  variants: {
    // ...
  },
  plugins: [
      // Initialize with default values (see options below)
      require("tailwindcss-radix")(),
  ],
};

Options

require("tailwindcss-radix")({
  // Default: `radix`
  variantPrefix: "rdx",
  // Default: `false`
  // Cannot be enabled in combination with `variantPrefix: ""`
  skipAttributeNames: false
})

// Example 1: Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"`
variantPrefix: "rdx",
skipAttributeNames: false

// Example 2: Generates `[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"`
variantPrefix: "",
skipAttributeNames: false

// Example 3: Generates `rdx-*` utilities for `data-[state/side/orientation]="*"`
variantPrefix: "rdx",
skipAttributeNames: true

Styling state

Basic usage

This plugin works with CSS attribute selectors. Use the variants based on the data-* attribute added by radix.

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

const App = () => {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="border-black radix-state-open:border-2">
        Trigger
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Item</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>  
  );
};

export default App;

Accessing parent state

Sometimes we want to access state in the child of the trigger element. This can be achieved by adding the group class to the parent element and the group-* variants on the child element.

The below example shows how you can apply a conditional transform for a radix Accordion:

import React from "react";
import * as DropdownMenu from "@radix-ui/react-accordion";

const App = () => {
  return (
    <Accordion.Root type="multiple">
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger className="group">
            <div className="flex items-center">
              Item 1
              <ChevronDownIcon className="w-5 h-5 ml-2 transform group-radix-state-open:rotate-180" />
            </div>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content 1</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger className="group">
            <div className="flex items-center">
              Item 2
              <ChevronDownIcon className="w-5 h-5 ml-2 transform group-radix-state-open:rotate-180" />
            </div>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content 2</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root> 
  );
};

export default App;

Animating from origin

This plugin also generates the following origin-* utilities to transform from the content position origin.

.origin-radix-dropdown-menu {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-radix-hover-card {
    transform-origin: var(--radix-hover-card-content-transform-origin);
}

.origin-radix-context-menu {
    transform-origin: var(--radix-context-menu-content-transform-origin);
}

.origin-radix-popover {
    transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-radix-tooltip {
    transform-origin: var(--radix-tooltip-content-transform-origin);
}

License

MIT