Feature Request: Tailwind Plugin

[nonissue]

I absolutely love this project — the palette itself is stunning, and the documentation and guidance is extremely useful and reflects a tremendous amount of thoughtfulness and deliberation.

That said, I currently have several projects that rely on Tailwind, and even though I'd like to experiment with the radix colors, it's not easy.

What I'm currently doing is this (in my tailwind.config.js).

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        // ...
        white: '#fff',
        dark: {
          // ...
          bronzeA12: 'hsl(20 99.8% 96.4% / 0.974)',
          crimson1: 'hsl(335 20.0% 9.6%)',
          // ...
          crimson12: 'hsl(332 87.0% 96.0%)',
        },
        light: {
          bronzeA1: 'hsl(0 89.3% 18.3% / 0.012)',
          // ...
          bronzeA12: 'hsl(12 98.7% 5.7% / 0.832)',
          crimson1: 'hsl(332 100% 99.4%)',
          // ...
          crimson12: 'hsl(340 65.0% 14.5%)',
        },
      },
    },
  },
};

It's kind of clunky, and so I was wondering if there has been any consideration in making the colors available as a tailwind plugin to simplify the process?

If you don't plan on adding tailwind support, but still think it's worthwhile, it may be something I'm able to do myself.

Thanks for the great project!

[nattui]

Great suggestion! I wanted to add that others thought of this as well.

• https://twitter.com/AmanVirk1/status/1410489340187213831
• https://github.com/brattonross/windy-radix-palette

[crswll]

Hacked this up real quick because I was playing with something. It might be useful for others. I was going to put up a PR but wasn't sure how best to approach without bothering the authors and wasn't sure if it would just be better in another repo all together. Here it is if someone wants to run with it.

tailwindcss-radix-ui-colors.js

const colors = require('@radix-ui/colors')

const mapKeys = (object, cb) =>
  Object
    .entries(object)
    .reduce((out, [key, value]) => ({
        ...out,
        [cb(key)]: typeof value === "object"
          ? mapKeys(value, cb)
          : value,
    }), {})

// Just makes the names more Tailwindish.
const keyTransformer = key => {
  if (key.endsWith('DarkA')) {
    return key.replace('DarkA', '-dark-alpha')
  } else if (key.endsWith('Dark')) {
    return key.replace('Dark', '-dark')
  } else if (key.endsWith('A')) {
    return key.replace('A', '-alpha')
  }

  return /\d$/.test(key)
    // Removes the color name and A from the color key...
    ? key.replace(/[a-z]/gi, '')
    : key
}

module.exports = mapKeys(
  colors,
  keyTransformer
)

tailwind.config.js

module.exports = {
  theme: {
    colors: require('./tailwindcss-radix-ui-colors.js')
  },
}

A quick preview of it being used in Tailwind Intellisense.

[benknight]

If no plugin, at least a page in the documentation about how to quickly configure Tailwind to use one the colors.

[srcn]

Put together a quick Tailwind plugin based on the @crswll's solution.

radixui-colors-tailwind.js

const plugin = require('tailwindcss/plugin');
const radixColors = require('@radix-ui/colors');

const transformedColors = Object
  .entries(radixColors)
  .reduce((acc, [paletteName, palette]) => {

      // Transform the palette names so they look more Tailwind-ish
      paletteName = paletteName
          .replace(/A$/, '-alpha')
          .replace(/Dark/, '-dark');

      // Remove the color name and 'A' from hue levels
      palette = Object
          .entries(palette)
          .reduce((acc, [hueLevel, color]) => {
              hueLevel = hueLevel.replace(/[a-z]/gi, '');
              acc[hueLevel] = color;
              return acc;
          }, {});

      acc[paletteName] = palette;
      return acc;
  }, {});

module.exports = plugin(({}) => {}, {
  theme: {
      extend: {
          colors: {
              ...transformedColors,
          },
      },
  },
});

tailwind.config.js

plugins : [
  require('./radixui-colors-tailwind'),
]

VSCode preview

[raiyansarker]

how can automatic dark mode can be applied with this method?

Put together a quick Tailwind plugin based on the @crswll's solution.

radixui-colors-tailwind.js

const plugin = require('tailwindcss/plugin');
const radixColors = require('@radix-ui/colors');

const transformedColors = Object
  .entries(radixColors)
  .reduce((acc, [paletteName, palette]) => {

      // Transform the palette names so they look more Tailwind-ish
      paletteName = paletteName
          .replace(/A$/, '-alpha')
          .replace(/Dark/, '-dark');

      // Remove the color name and 'A' from hue levels
      palette = Object
          .entries(palette)
          .reduce((acc, [hueLevel, color]) => {
              hueLevel = hueLevel.replace(/[a-z]/gi, '');
              acc[hueLevel] = color;
              return acc;
          }, {});

      acc[paletteName] = palette;
      return acc;
  }, {});

module.exports = plugin(({}) => {}, {
  theme: {
      extend: {
          colors: {
              ...transformedColors,
          },
      },
  },
});

tailwind.config.js

plugins : [
  require('./radixui-colors-tailwind'),
]

VSCode preview

[crswll]

@raiyansarker I have a plugin that will "swap" Tailwind themes (but it really composes them). It uses custom properties so adding transparency the Tailwind way might not work... like bg-yellowP3-5/50 wouldn't work but bg-yellow-5/50 would be fine. I set up a little playground here to mess around with it.

https://play.tailwindcss.com/vdFeGTQyAb?file=config

[yp717]

A while ago I built a plugin (installable via npm) that accomplishes a similar thing - it has support for radix colors and the palette of course, but also theme swapping, overrides and even pinning subsets of the page to specific themes. You can also choose to exclude parts of the palette as part of configuration :) Sharing here in case it helps @nonissue @crswll

You can swap themes automatically by just specifying the base color bg-red-500 will auto invert the tailwind way, but you can also pin it to use a specific variant from a specific theme by just specifying it in the name: bg-redLight-500 will stay light and bg-redDark-500 will stay dark 😄

Fair warning - only quirky bit is from feedback I've heard the single numbers in the radix palette (1-12) were a bit hard so swap so they look a little more tailwind-y (palette is identical but numeric codes are x100) but I've used it on a few projects now and it's been working well - would love any feedback if you end up trying it out and have any issues!

https://github.com/yp717/tailwindcss-radix-colors-plugin

[inwardmovement]

Based on https://fynn.at/shorts/2023-03-19-how-to-use-radix-colors-with-tailwind-css, to replace (not extend) tailwind colors with radix colors:

npm i @radix-ui/colors

style.css:

@import "@radix-ui/colors/gray.css";
...

tailwind.config.js:

...
  theme: {
    colors: {
      black: "rgb(0 0 0)",
      white: "rgb(255 255 255)",
      inherit: "inherit",
      transparent: "transparent",
      current: "currentColor",
      gray: radixColors("gray"),
      ...
    },
  },
...

function radixColors(color) {
  let scale = Array.from({ length: 12 }, (_, i) => {
    let id = i + 1;
    return [
      [id, `var(--${color}${id})`],
      [`a${id}`, `var(--${color}A${id})`],
    ];
  }).flat();

  return Object.fromEntries(scale);
}