How to use Tailwind CSS default color variable in custom classes?

Question

I just want to use tailwind css default colors in my custom css classes. For eg.

li.active{
    color: var(--colors-red-50);/* from tailwind css color palette*/
}

I am using tailwind css with next js.

Answer 1

Try this is index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  li.active {
    @apply text-red-50; 
  }
}