Search code examples
tailwind-css

Can tailwind colors be referenced from CSS?

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

  • Yes, you can use the theme() function.

    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