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