Create custom utility referencing additional custom colors - tailwind-css

Question

I have several custom utilities configured in my tailwind.config.cjs file this:
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: '1px solid #ef4444',
},
[...]
};
addUtilities(utilities);
}),
],
I also have defined custom colors, like this
extend: {
colors: {
'red-50': '#FEF2F2',
[...]
'red-500': '#EF4444',
[...]
}
}
Instead of having the hard-coded value in my custom utility, I'd like to reference my custom color, so that if I ever change my color palette my custom utilities would be updated accordingly. So, ideally, it would be something like this:
const utilities = {
'.border-invalid': {
apply: 'border border-solid border-red-500',
},
Or some way to reference red-500 in my custom utility instead of the hard-coded #EF4444.
Is there a way to achieve it?
#ihar-aliakseyenka answer workes great, I added this just to tell that the second alternative, border: "1px solid theme('colors.red-500')" even show a nice and clear css definition when flying with the mouse over:
While the first option, border: 1px solid ${theme('colors.red-500')}` just show the literarl value (as expected, btw):

Answer 1

You may use theme() directive
plugins: [
plugin(({ addUtilities, theme }) => { // extract theme
const utilities = {
'.border-invalid': {
border: `1px solid ${theme('colors.red-500')}`, // concatenate
}
};
addUtilities(utilities);
}),
],
// or pass it as a string
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: "1px solid theme('colors.red-500')",
}
};
addUtilities(utilities);
}),
],
Note: you set your color as red-500, so no dot notation will be available like theme('colors.red.500') (it will cause error. Well maybe not because Tailwind has red-500 color but in any other cases it will)
DEMO