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?

Ihar Aliakseyenka · Accepted Answer · 2021-05-28 12:15:58Z

10

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

answered May 28, 2021 at 12:15

Ihar Aliakseyenka

14.8k5 gold badges51 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Awesome, thanks! I know about @apply but it does not work on pseudo classes like :before or :after. That's why I need to access values directly.

Yilmaz · Accepted Answer · 2022-02-27 04:28:02Z

0

You can also add exact color to tailwind.css inside [ ]. For example

 <div class="border border-[#4231d]"></div>

You can use the same color in css class:

.my-class {
    border: 1px solid #4231d;
}

answered Feb 27, 2022 at 4:28

Yilmaz

51k19 gold badges226 silver badges278 bronze badges