TailwindCSS Radix

TailwindCSS plugin that helps 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`
  // Enabling cannot be used in combination with `variantPrefix: ""`
  skipAttributeNames: false
})

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

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

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

Styling state

Basic usage

This plugin works with CSS attribute selectors. Use the utilities 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 using the group-* utilities.

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