Types for tailwind

Question

I am using tailwind.config.js in order to extend some colors:

const theme = {
  mode: 'jit',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'media', // 'media' or 'class'
  theme: {
    extend: {
       colors: {}

but then I might pass a color to a component in props in order to later use it as border-${color} and/or text-${color}. Right now the value would be just of type string so I am not getting the tips, is there some way to get a type of the combined custom colors + default tailwind's colors ?

Answer 1

You have to return the complete string border-red-500 in place of border-${color}.

Like you can define a function like this

let {color} = props;
function getColor( color) {
  return 'border-" + color;
}

And then use it like this

<div className={`border-2 ${getColor}`}> hello world </div>