Using Radix Colors in TailwindCSS

Normally, the colors from the Radix package cannot be used directly in Tailwind. The object that Radix provides does not match the tailwind logic of colors. However, with a bit of javascript and mapping of the two systems, they can be combined beautifully.

All you need to do is installing @radix-ui/colors

npm install @radix-ui/colors

Import the colors to your tailwind config file and add the conversion logic. I am using typescript in this example but you can easily do the same in JavaScript.

import * as radixColors from '@radix-ui/colors'
import type { Config } from 'tailwindcss'

/**
 * Format Radix colors into Tailwind CSS format.
 *
 * @example blueDark.blue1 -> blue-dark-1
 */
function formatRadixColors() {
  const colors: Record<string, Record<string, string>> = {}

  const colorEntries = Object.entries(radixColors)
  for (const [radixColorName, radixColor] of colorEntries) {
    const colorName = radixColorName
    const color: Record<string, string> = {}

    for (const [radixScale, value] of Object.entries(radixColor)) {
      const scale = radixScale.match(/\d+$/)?.[0]
      if (!scale) {
        continue
      }
      color[scale] = value
    }

    const kebabCaseColorName = colorName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()

    colors[kebabCaseColorName] = color
  }

  return colors
}

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: formatRadixColors(),
    },
  },
}

That's it! You can now use all Radix colors like this:

<div class="bg-slate-1 text-slate-12">
    Test
</div>