tailwind-csscss-variablesshadcnui

Rename Tailwind's color CSS variables?

I'm using Tailwind and shadCN UI. My theme needs my primary color to be in a css file and have this name:

:root {
  --primary: oklch(0.205 0 0);
}

However instead of setting the color value directly can I use a Tailwind default value? EG something like:

:root {
  --primary: --tw-red-300
}
Solution

  • Just using var and the Tailwind name works:

    :root {
  --primary: var(--color-red-300);
}

    Names are here: https://tailwindcss.com/docs/theme