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 |