Can tailwind colors be referenced from CSS?

Question

I have some custom colors in my tailwind.config.js:

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

I want to use them in my CSS files. Is there a way to replace #0e70ed below with primary-500?

.prose a.custom-link {
  color: #0e70ed;
}

Answer 1

Yes, you can use theme() directive

Your colors

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

will be available in CSS files as

.prose a.custom-link {
  color: theme('colors.primary.500');
}

More info here