Skip to content

junwen-k/tailwindcss-radix-ui-primitives

Folders and files

NameName
Last commit message
Last commit date
Jun 1, 2024
May 27, 2024
May 27, 2024
May 27, 2024
May 27, 2024
Sep 24, 2023
May 27, 2024
May 27, 2024
Sep 25, 2023
May 27, 2024
May 27, 2024
Sep 24, 2023
Jan 2, 2024
May 27, 2024
Feb 27, 2025
Feb 27, 2025
May 27, 2024
May 27, 2024
May 27, 2024
May 27, 2024

Repository files navigation

tailwindcss-radix-ui-primitives

CI npm Tailwind License

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

Features

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