tailwindcss-radix-ui-primitives

A plugin for Tailwind CSS v3.2+ that generates data attribute as well as CSS variable utilities for Radix UI.

Features

✨ Embrace the native data-attributes state of Tailwind CSS.
⭐ Generate Radix UI's CSS Variable utilities.

Installation

Install the plugin with your favourite package manager:

npm install tailwindcss-radix-ui-primitives
yarn add tailwindcss-radix-ui-primitives
pnpm install tailwindcss-radix-ui-primitives
bun add tailwindcss-radix-ui-primitives

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-radix-ui-primitives')({
      themeKey: 'radix', // Defaults to "radix"
    }),
    // ...
  ],
}

Usage

This plugin simplifies the use of Radix's data attribute selectors by injecting shortcuts directly into your theme.data section of your Tailwind config. You can write Radix's state variants with the benefit of IntelliSense. For example:

- class="data-[state=open]:..."
+ class="data-state-open:..."

In addition to data attributes, Radix's CSS Variables are added to your theme.${themeKey} section of your Tailwind config. These variables are then distributed to their respective keys where it makes sense, allowing you to create utilities like w-radix-accordion-content-height.

Variable	Key
`-width` and `-height`	spacing
`*-transform-origin`	transform-origin
`-x` and `-y`	translate

Additionally, Radix's CSS Variables can be referenced using the theme() function.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
-    keyframes: {
+    keyframes: ({ theme }) => ({
      slideDown: {
        from: { height: 0 },
-       to: { height: 'var(--radix-accordion-content-height)' },
+       to: { height: theme('radix.accordion-content-height') },
      },
      slideUp: {
-       from: { height: 'var(--radix-accordion-content-height)' },
+       from: { height: theme('radix.accordion-content-height') },
        to: { height: 0 },
      },
    },
    // ...
  },
}

However, using theme() function may not currently provide any specific benefits.

Documentation

Data Attributes

Class	Selector
`data-active`	`[data-active]`
`data-disabled`	`[data-disabled]`
`data-highlighted`	`[data-highlighted]`
`data-invalid`	`[data-invalid]`
`data-max`	`[data-max]`
`data-placeholder`	`[data-placeholder]`
`data-valid`	`[data-valid]`
`data-value`	`[data-value]`
`data-align-center`	`[data-align="center"]`
`data-align-end`	`[data-align="end"]`
`data-align-start`	`[data-align="start"]`
`data-motion-from-end`	`[data-motion="from-end"]`
`data-motion-from-start`	`[data-motion="from-start"]`
`data-motion-to-end`	`[data-motion="to-end"]`
`data-motion-to-start`	`[data-motion="to-start"]`
`data-orientation-`	`[data-orientation="horizontal"]`
`data-orientation-vertical`	`[data-orientation="vertical"]`
`data-side-bottom`	`[data-side="bottom"]`
`data-side-left`	`[data-side="left"]`
`data-side-right`	`[data-side="right"]`
`data-side-top`	`[data-side="top"]`
`data-state-active`	`[data-state="active"]`
`data-state-checked`	`[data-state="checked"]`
`data-state-closed`	`[data-state="closed"]`
`data-state-complete`	`[data-state="complete"]`
`data-state-delayed-open`	`[data-state="delayed-open"]`
`data-state-hidden`	`[data-state="hidden"]`
`data-state-inactive`	`[data-state="inactive"]`
`data-state-indeterminate`	`[data-state="indeterminate"]`
`data-state-instant-open`	`[data-state="instant-open"]`
`data-state-loading`	`[data-state="loading"]`
`data-state-off`	`[data-state="off"]`
`data-state-on`	`[data-state="on"]`
`data-state-open`	`[data-state="open"]`
`data-state-unchecked`	`[data-state="unchecked"]`
`data-state-visible`	`[data-state="visible"]`
`data-swipe-cancel`	`[data-swipe="cancel"]`
`data-swipe-end`	`[data-swipe="end"]`
`data-swipe-move`	`[data-swipe="move"]`
`data-swipe-start`	`[data-swipe="start"]`
`data-swipe-direction-down`	`[data-swipe-direction="down"]`
`data-swipe-direction-left`	`[data-swipe-direction="left"]`
`data-swipe-direction-right`	`[data-swipe-direction="right"]`
`data-swipe-direction-up`	`[data-swipe-direction="up"]`

CSS Variables

Variable	Inherited Properties
`radix-accordion-content-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-accordion-collapsible-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-context-menu-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-dropdown-menu-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-hover-card-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-menubar-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-navigation-menu-viewport-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-popover-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-select-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-tooltip-trigger-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-context-menu-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-dropdown-menu-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-hover-card-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-menubar-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-popover-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-select-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-tooltip-content-available-width`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-accordion-content-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-accordion-collapsible-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-context-menu-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-dropdown-menu-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-hover-card-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-menubar-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-navigation-menu-viewport-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-popover-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-select-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-tooltip-trigger-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-context-menu-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-dropdown-menu-content-available-`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-hover-card-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-menubar-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-popover-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-select-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-tooltip-content-available-height`	`padding,margin,width,height,max-height,gap,inset,space,translate,scroll-margin,scroll-padding`
`radix-context-menu-content-transform-origin`	`transform-origin`
`radix-dropdown-menu-content-transform-`	`transform-origin`
`radix-hover-card-content-transform-origin`	`transform-origin`
`radix-menubar-content-transform-origin`	`transform-origin`
`radix-popover-content-transform-origin`	`transform-origin`
`radix-select-content-transform-origin`	`transform-origin`
`radix-tooltip-content-transform-origin`	`transform-origin`
`radix-toast-swipe-move-x`	`translate`
`radix-toast-swipe-move-y`	`translate`
`radix-toast-swipe-end-x`	`translate`
`radix-toast-swipe-end-y`	`translate`

License

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

tailwindcss-radix-ui-primitives

Features

Installation

Usage

Documentation

Data Attributes

CSS Variables

License

Files

README.md

Latest commit

History

README.md

File metadata and controls

tailwindcss-radix-ui-primitives

Features

Installation

Usage

Documentation

Data Attributes

CSS Variables

License