How do I use Radix with Tailwindcss?

[jan-osch]

I really like the idea of accessible components! I would like to add some radix primitives to my project. I'm using Next.js and tailwindcss. I would like to add some classes depending on data-state value. I tried using https://github.com/ecklf/tailwindcss-radix but it doesn't seem to work. I also tried wrapping my components with a forwardRef, like here, but I cannot access the "data-state" of the component.

I would like to avoid using styled-components or custom CSS classes. How do I get the current state of data-props?

[jjenzz]

Which component are you trying to retrieve the data-state for? Usually our components can be controlled if you need the state. For example:

const [open, setOpen] = React.useState(false);

return (
  <Dialog.Root open={open} onOpenChange={setOpen}>
    <Dialog.Trigger className={open ? 'bg-blue-300' : 'bg-blue-500'}>Open</Dialog.Trigger>
    <Dialog.Content />
  </Dialog.Root>
);

[jan-osch]

Thanks, @jjenzz, this is exactly what I was looking for. I already adopted the Tabs in my app as a controlled component.

[vitormarkis]

i caught myself in similar problem, trying to change the data-state attribute thinking this would reflect wheter the popover is open or not, this state approach is way more useful and makes it so much flexible, thanks for sharing that

[benoitgrelard]

Worth noting that now Tailwind supports arbitrary data attributes, so you don't even need to control state to get access to that and styling it.

#1000 (comment)

[arekbartnik]

@jjenzz how can we style using tw utility classes active tab in tabs component?

[jjenzz]

Something like this? Obviously the abstraction is totally up to you :)

const App = () => {
  const [value, setValue] = React.useState('one');

  const getTriggerClass = (triggerValue) => {
    return triggerValue === value ? 'bg-blue-300' : 'bg-blue-500';
  };

  return (
    <Tabs.Root value={value} onValueChange={setValue}>
      <Tabs.List>
        <Tabs.Trigger value="one" className={getTriggerClass('one')}>
          One
        </Tabs.Trigger>
        <Tabs.Trigger value="two" className={getTriggerClass('two')}>
          Two
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="one">One Content</Tabs.Content>
      <Tabs.Content value="two">Two Content</Tabs.Content>
    </Tabs.Root>
  );
};

[ecklf]

@jan-osch I maintain tailwindcss-radix. Would you mind making an issue on what didn't work for you? Happy to get this fixed 🍻

[mhaidarhanif]

Thanks @ecklf for the package! I was just looking for it.

[mhaidarhanif]

Truly excellent stuff. This is the best way to answer this "how to use Radix with Tailwind CSS".

• https://tailwindcss-radix.vercel.app
• https://github.com/ecklf/tailwindcss-radix

Been using it for my template project for a while and happy with it.

[ecklf]

Glad this package provided value to you @mhaidarhanif <3

[paulwongx]

The modern solution seems to be either:
A) Use this plugin by the author of that tailwindcss-radix app above which works (https://www.npmjs.com/package/tailwindcss-radix)
B) Target the data-state directly without a plugin with data-[state=on]:opacity-40 for example

[jjenzz]

yep, tailwind more recently added data attribute support so today i wld ignore all of my suggestions above and use option B from @paulwongx here.

[ecklf]

Obviously biased opinion since I'm author of option A, but it think you should keep arbitrary values to a minimum unless you are trying to eject out of your design system for edge-cases. It taxes on readability and doesn't give you auto-completion from tailwinds language server.

The recommended way from Tailwind Labs to style HeadlessUI data attributes is to also use variants generated via plugin. See @headlessui/tailwindcss.

[jjenzz]

sure, whatever works for you. i should have been more specific that i was simply proposing ignoring my suggestions. any solution that allows tailwind to target data attributes is likely going to be a better experience than my original suggestions.

[ctjlewis]

The "styles-less" approach is truly bewildering. We have strayed so far from God's grace.

Could literally just ship the CSS with variables and then require consumers to set top-level CSS variables rather than requiring brain surgery to use a component.

All of web development has been cancelled until further notice. All websites are paused.

[jjenzz]

@ctjlewis if radix provided CSS variables they would need to provide variables for every possible thing you might want to style. that would be a maintenance burden for radix and its consumers for no real benefit.

• what if radix forgets to provide a variable you need?
  you have to create a feature request and wait for the team to implement it, or override to style manually anyway.
• what if radix accidentally breaks a variable you're using?
  your app is broken so you have to raise a bug report and wait for radix to resolve it, or override to style manually anyway.
• what if your preferred styling approach is BEM?
  you add classes to override and style manually anyway.

the unstyled approach is magnitudes more flexible.

rather than requiring brain surgery to use a component.

i'm curious why adding a className with your own styles feels like brain surgery to you?

[ctjlewis]

if radix provided CSS variables they would need to provide variables for every possible thing you might want to style. that would be a maintenance burden for radix and its consumers for no real benefit.

Yes, instead we must provide CSS styles for every possible thing we want to use, which is a huge burden on users!

I don't know, stuff has gotten so weird now that most people don't seem to mind, but it seems pretty obvious things should come with default styles and simply allow you to override them. We can logically have our cake and eat it too.

Daisy UI is a good example. Chakra etc. These come with default styles.

---

i'm curious why adding a className with your own styles feels like brain surgery to you?

Relative to just dropping in a component and giving it custom styles if appropriate, it basically is brain surgery.

[jjenzz]

Yes, instead we must provide CSS styles for every possible thing we want to use, which is a huge burden on users!

Radix Primitives are intentionally low-level. their purpose is for people to use them to create their own design systems like Daisy UI or Chakra from them. the libraries you have pointed to are design systems—Radix Primitives is not a design system.

if you are looking for a ready-made design system built from Radix Primitives, here are a couple of open source ones i know of that are available today:

• https://ui.shadcn.com/
• https://tamagui.dev/

[jjenzz]

@ctjlewis now that it has been announced, i can add https://radix-ui.com/themes to that list 🎉

Radix Themes is the new design system built on Radix Primitives from the Radix UI team.

[yp717]

Full disclosure I'm the maintainer of this package, so just a heads up there. If you're looking to use Tailwind utilities with the Radix palette, tailwindcss-radix-colors-plugin could be just what you need. It's a few lines of code to add so takes the burden away from the end user @ctjlewis, and we support themes and theme pinning on DOM subsets (if you want a specific part of the page to stick to a theme) so you can use tailwind like you did before with all the colors in the radix scales.

It might be worth noting we've also made the Radix colors range from 100-1200, like Tailwind's original system, because we found this made it easier to spot them in the markup in a string of utility classes.

You can download it from npm and it’s all open source on GitHub and we also have a docs site with examples + explanations 😄

[mgibson91]

You can use radix-ui attributes like:

With tailwind like this:

data-[state=open]:bg-green-500

Incredibly useful - thanks Radix team!

[junwen-k]

To anyone who is reading this, recently I've just released a plugin that simplifies styling for Radix UI using Tailwind CSS. It works similarly with tailwindcss-radix but the difference is that it injects Radix UI common data attribute selectors directly to your theme.data.

You can then write Radix's state variants with the benefit of IntelliSense. For example:

- class="data-[state=open]:..."
+ class="data-state-open:..."

Personally I prefer this way because it feels more "idiomatic" as Tailwind CSS recently added support for data-attribute selectors.
Additionally, CSS variables like w-radix-accordion-content-height are also supported.

The plugin is heavily inspired by tailwindcss-radix, thanks @ecklf!

[oussamachah2020]

i just want to change button background LOL

[FlatMapIO]

I used different approaches to import radix-theme in SolidJS and Tailwind. I prefer the method of customizing based on copy-paste modification, so I provided a solution with CSS modules + CVA.

https://github.com/FlatMapIO/radix-theme-solid-start?tab=readme-ov-file