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;
}

user_14305076 · Answer

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

user_8816585 · Answer

Why not directly use tailwind here ?

.prose a.custom-link {
  @apply text-primary-500;
}

If you want to access it in JS, you can use resolveConfig

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '@/tailwind.config.js'
const twFullConfig = resolveConfig(tailwindConfig)

...
mounted() {
  console.log('tw', twFullConfig.theme.colors['primary-500'])
}

user_8825640 · Answer

It's better to avoid creating new classes and use the ones Tailwind offers so you keep the CSS generated as small as possible. In TailwindCSS docs you can find a more detailed explanation

Can tailwind colors be referenced from CSS?

3 Answers