How to use tailwindcss colors in custom css classes?

Question

I can use predefined tailwind classes to set color in HTML like:

<div class="border border-purple-500"></div>

But I also would like to use the same color in my custom CSS, like:

.my-class {
    border: 1px solid $purple-500;
}

Is it possible to get tailwind color value in CSS?

Answer 1

It is. You can use theme() directive.

.my-class {
    border: 1px solid theme('colors.purple.500');
}

or via @apply

.my-class {
    @apply border border-purple-500;
}