TailwindCSS plugin that helps styling radix state

Last update: Jun 22, 2022

npm version npm downloads

TailwindCSS Radix

TailwindCSS plugin that helps styling radix state.

Installation

yarn

yarn add tailwindcss-radix

npm

npm i tailwindcss-radix

Usage

You can find the demo dropdown menu inside the demo folder.

Add the plugin to your plugins array:

module.exports = {
  theme: {
    // ...
  },
  variants: {
    // ...
  },
  plugins: [
      // Initialize with default values (see options below)
      require("tailwindcss-radix")(),
  ],
};

Options

require("tailwindcss-radix")({
  // Default: `radix`
  variantPrefix: "rdx",
  // Default: `false`
  // Enabling cannot be used in combination with `variantPrefix: ""`
  skipAttributeNames: false
})
// Example 1: Generates `rdx-[state/side]-*` utilities for `data-[state/side]="*"`
variantPrefix: "rdx",
skipAttributeNames: false

// Example 2: Generates `[state/side]-*` utilities for `data-[state/side]="*"`
variantPrefix: "",
skipAttributeNames: false

// Example 3: Generates `rdx-*` utilities for `data-[state/side]="*"`
variantPrefix: "rdx",
skipAttributeNames: true

Styling state

Basic usage

This plugin works with CSS attribute selectors. Use the utilities based on the data-* attribute added by radix.

{ return ( Trigger Item ); }; export default App; ">
import React from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

const App = () => {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="border-black radix-state-open:border-2">
        Trigger
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Item</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>  
  );
};

export default App;

Accessing parent state

Sometimes we want to access state in the child of the trigger element. This can be achieved by using the group-* utilities.

The below example shows how you can apply a conditional transform for a radix Accordion:

{ return (
Item 1
Content 1
Item 2
Content 2
); }; export default App; ">
import React from "react";
import * as DropdownMenu from "@radix-ui/react-accordion";

const App = () => {
  return (
    <Accordion.Root type="multiple">
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger className="group">
            <div className="flex items-center">
              Item 1
              <ChevronDownIcon className="w-5 h-5 ml-2 transform group-radix-state-open:rotate-180" />
            </div>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content 1</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger className="group">
            <div className="flex items-center">
              Item 2
              <ChevronDownIcon className="w-5 h-5 ml-2 transform group-radix-state-open:rotate-180" />
            </div>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Content 2</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root> 
  );
};

export default App;

Animating from origin

This plugin also generates the following origin-* utilities to transform from the content position origin.

.origin-radix-dropdown-menu {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-radix-hover-card {
    transform-origin: var(--radix-hover-card-content-transform-origin);
}

.origin-radix-context-menu {
    transform-origin: var(--radix-context-menu-content-transform-origin);
}

.origin-radix-popover {
    transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-radix-tooltip {
    transform-origin: var(--radix-tooltip-content-transform-origin);
}

License

MIT

GitHub

https://github.com/ecklf/tailwindcss-radix
Comments
  • 1. Unmount Animations

    Radix supports leave animations by suspending unmount while your animation plays out, more info here.

    While going over the source code, I've noticed how this plugin adds support for the closed state (radix-state-closed). However, I was not able to successfully animate the unmount phase using tailwind. Most if not all of the demo components have the same issue of being instantly unmounted without a smooth transition.

    Is it possible with the current API to achieve this? Otherwise, is it feasible to implement support for it?

    Reviewed by Pondorasti at 2021-12-29 03:30
  • 2. requesting `peer` variant

    I also have a custom plugin setup like yours. But after I found your plugin, really wanna switch to yours and found peer variant missing. You can find the peer variant of my plugin here.

    Reviewed by sudoaugustin at 2022-06-20 18:31
  • 3. Support for the new NavigationMenu, Select, and Toast components

    Particularly, I believe the new variables to enable advanced animation (e.g. NavigationMenu Advanced Animation, --radix-navigation-menu-viewport-[width|height]) may need to be explicitly supported.

    An example/demo much like the great demos already here, would also be great.

    Reviewed by smerchek at 2022-03-07 19:51
  • 4. Allows for styling tabs with data-state-"active"

    Radix-Ui's Tabs component uses a data-state-active rather than data-state-open. This pr includes the active state and will allow for styling an active tab.

    Reviewed by JasonDocton at 2021-11-21 23:39
  • 5. windy-radix-palette & tailwindcss-radix not work

    I am using both windy-radix-palette and tailwindcss-radix.

    But I found that the css class of tailwindcss-radix does not work properly.

    For example this.

    <DropdownMenu.Content
                  align="end"
                  sideOffset={5}
                  className={cx(
                    " radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down",
                    "rounded-md p-3 beautify-shadow",
                    "bg-white dark:bg-gray-800"
                  )}
                  style={{
                    width: '278px'
                  }}
                >
    

    There is no animation applied on

    Reviewed by EryouHao at 2022-06-05 16:36
  • 6. add h-*/w-* size utilities of the content when it opens/closes

    Animating content size

    Use the --radix-accordion-content-width and/or --radix-accordion-content-height CSS variables to animate the size of the content when it opens/closes.

    <Accordion.Content forceMount className="overflow-hidden">
      <Transition
        show={currentItem === "item-1"}
        enter="ease-out duration-300"
        enterFrom="h-0"
        enterTo="h-radix-accordion"
        leave="ease-in duration-300"
        leaveFrom="h-radix-accordion"
        leaveTo="h-0"
      >
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Voluptatum ullam, ratione veniam voluptate nobis sunt laboriosam
          aperiam harum fugit corrupti alias magnam officiis nihil minima
          eum excepturi natus similique? Cupiditate reprehenderit, hic sequi
          modi nemo odit esse quas adipisci perferendis beatae deserunt
          ducimus itaque molestias quibusdam porro assumenda laudantium id!
        </p>
      </Transition>
    </Accordion.Content>
    

    Accordion docs Collapsible docs

    Reviewed by domosedov at 2021-12-21 08:26
  • 7. Fix context menu transform origin

    Fix the transform origin of ContextMenu in the demo

    - "origin-radix-dropdown-menu radix-side-right:animate-scale-in",
    + "origin-radix-context-menu radix-side-right:animate-scale-in",
    
    Reviewed by tianenpang at 2022-04-26 16:10
  • 8. Great job!

    I just wanted to say thank you for the high quality work and huge effort you've been dedicating to this library.

    The API you've created makes total sense and conforms to Radix/Tailwind conventions. It's so good that it seems like it was created by the Radix/Tailwind authors.

    Also the work you've made here https://tailwindcss-radix.vercel.app is mind blowing, I have no words to describe how good it is.

    Thank you very much!

    Reviewed by hnordt at 2022-04-26 05:45
A toolchain for React component styling.

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

Jun 23, 2022
๐ŸŽจ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Jun 14, 2022
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??๏ธ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jun 18, 2022
Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022
Functional typed classnames for TailwindCSS
Functional typed classnames for TailwindCSS

tailwindcss-classnames Functional typed classnames for TailwindCSS TailwindCSS is a CSS library that has gained a lot of traction. The developer exper

Jun 16, 2022
๐ŸŒ โ€• React/Next.js/TailwindCSS portfolio

?? โ€• React/Next.js/TailwindCSS portfolio

Jun 2, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022
Qr-code-styling - JavaScript library for generating QR codes with a logo and styling
Qr-code-styling - JavaScript library for generating QR codes with a logo and styling

QR Code Styling JavaScript library for generating QR codes with a logo and styli

Jun 17, 2022
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

Jun 19, 2022
M Haidar Hanif's personal website with React, Remix, Stitches, Radix UI, and deployed to Vercel.

mhaidarhanif-web M Haidar Hanif's personal website with React+Remix. Deployed to Vercel. Current repo is at mhaidarhanif-web on GitHub. Variants The w

May 16, 2022
โช Rewinds โ€“ Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more
โช Rewinds โ€“ Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

โช Rewinds โ€“ Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

Jun 25, 2022
Beautiful, native menus for React Native + Web, inspired by Radix UI
Beautiful, native menus for React Native + Web, inspired by Radix UI

Beautiful, native menus for React Native + Web, inspired by Radix UI. ?? Radix UI on Web ?? Native elements on iOS/Android (where possible) ?? Same AP

Jun 17, 2022
Auth model created by Using nodeJs for backend & reactJs for frontend with the help of TailwindCss in styling
Auth model created by Using nodeJs for backend & reactJs for frontend with the help of TailwindCss in styling

The Universal Auth System Using The MERN Stack Including Mysql --> The project is divded to two separte projects 1- The Client side -> containing the

Feb 19, 2022
React Native Zephyr is a TailwindCSS-inspired styling library for React Native.

React Native Zephyr STATUS: In development This project is actively under development. We're approaching v1.0.0, in which the API will be stable and n

Jun 21, 2022
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.

react-native-TouchableSetActive Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for bu

Mar 11, 2020
A plugin example for writing reactions with the Figma plugin API
A plugin example for writing reactions with the Figma plugin API

?? figma-plugin-example-prototype-write The ability to write protoype interactions in the Figma plugin API has landed! This update allows plugins to c

Feb 28, 2022
Docusaurus-react-native-plugin - A plugin to enable React Native Web and Reanimated on Docusaurus.

Docusaurus React Native Plugin A plugin to enable React Native Web and Reanimated on Docusaurus. Installation yarn add @gorhom/docusaurus-react-native

Apr 30, 2022