Tailwind CSS Radix UI variants

globals.css

@custom-variant data-horizontal (&[data-orientation="horizontal"]);
@custom-variant data-vertical (&[data-orientation="vertical"]);

@custom-variant data-open (&[data-state="open"]);
@custom-variant data-closed (&[data-state="closed"]);
@custom-variant data-active (&[data-state="active"]);
@custom-variant data-inactive (&[data-state="inactive"]);
@custom-variant data-checked (&[data-state="checked"]);
@custom-variant data-unchecked (&[data-state="unchecked"]);
@custom-variant data-indeterminate (&[data-state="indeterminate"]);
@custom-variant data-open (&[data-state="complete"]);
@custom-variant data-closed (&[data-state="loading"]);
@custom-variant data-on (&[data-state="on"]);
@custom-variant data-off (&[data-state="off"]);

@custom-variant data-disabled (&[data-disabled]);
@custom-variant data-placeholder (&[data-placeholder]);
@custom-variant data-highlighted (&[data-highlighted]);
@custom-variant data-valid (&[data-valid]);
@custom-variant data-invalid (&[data-invalid]);

/* DropdownMenu.Content, DropdownMenu.SubContent */
@custom-variant data-left (&[data-side="left"]);
@custom-variant data-right (&[data-side="right"]);
@custom-variant data-bottom (&[data-side="bottom"]);
@custom-variant data-top (&[data-side="top"]);

@custom-variant data-start (&[data-align="start"]);
@custom-variant data-end (&[data-align="end"]);
@custom-variant data-center (&[data-align="center"]);

@custom-variant data-motion-to-start (&[data-motion="to-start"]);
@custom-variant data-motion-to-end (&[data-motion="to-end"]);
@custom-variant data-motion-from-start (&[data-motion="from-start"]);
@custom-variant data-motion-from-end (&[data-motion="to-end"]);

@custom-variant data-swipe-start (&[data-swipe="start"]);
@custom-variant data-swipe-move (&[data-swipe="move"]);
@custom-variant data-swipe-cancel (&[data-swipe="cancel"]);
@custom-variant data-swipe-end (&[data-swipe="end"]);

@custom-variant data-swipe-up (&[data-swipe-direction="up"]);
@custom-variant data-swipe-down (&[data-swipe-direction="down"]);
@custom-variant data-swipe-left (&[data-swipe-direction="left"]);
@custom-variant data-swipe-right (&[data-swipe-direction="right"]);