CODEWITHSUNDEEP
csstailwind-css
untitled
untitled

Reputation: 1127

How to use tailwindcss colors in custom css classes?

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?

Upvotes: 4

Views: 1535

Answers (2)

Yilmaz
Yilmaz

Reputation: 49681

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

Upvotes: 0

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14323

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

Upvotes: 10

Related Questions