Normally, the colors from the Radix package cannot be used directly in Tailwind. While Tailwind titles ten colors with the values 50-100, Radix provides twelve colors with the numbers 1-12. However, with a bit of javascript and mapping of the two systems, they can be combined beautifully.
const defaultTheme = require('tailwindcss/defaultTheme')
const radixColors = require('@radix-ui/colors')
function colorKey(name, step) {
return `${name.replace('Dark', '')}${step}`
}
function fromRadixColor(key, color) {
return [
key,
{
1: color[colorKey(key, 1)],
2: color[colorKey(key, 2)],
3: color[colorKey(key, 3)],
4: color[colorKey(key, 4)],
5: color[colorKey(key, 5)],
6: color[colorKey(key, 6)],
7: color[colorKey(key, 7)],
8: color[colorKey(key, 8)],
9: color[colorKey(key, 9)],
10: color[colorKey(key, 10)],
11: color[colorKey(key, 11)],
12: color[colorKey(key, 12)],
},
]
}
const mappedRadixColors = Object.fromEntries(
Object.entries(radixColors).map(([key, value]) => fromRadixColor(key, value))
)
module.exports = {
.
.
.
theme: {
extend: {
colors: {
slate: mappedRadixColors.slate,
'slate-dark': mappedRadixColors.slateDark,
// In order to support TailwindUI library stuff
// I matched the original colors of Tailwind with the Radix colors
gray: {
100: mappedRadixColors.slate[1],
200: mappedRadixColors.slate[3],
300: mappedRadixColors.slate[5],
400: mappedRadixColors.slate[7],
500: mappedRadixColors.slate[8],
600: mappedRadixColors.slate[9],
700: mappedRadixColors.slate[10],
800: mappedRadixColors.slate[11],
900: mappedRadixColors.slate[12],
},
},
},
},
}