Why Tailwind get border color from text-color class?

Question

I prepared some custom colors for my Tailwind project. When I using "border" class with "text-color" class, border has color of text color.

Additionally, using "border-color" class not respected.

Example: https://play.tailwindcss.com/khYce8N9yU

How to set the same color of background and border and other color for text?

Ihar Aliakseyenka · Accepted Answer · 2022-10-14 14:15:08Z

2

That is because Tailwind includes border-color as currentColor in preflight styles

You may specify other default border color (for example to be red) like

module.exports = {
    theme: {
        borderColor: {
            DEFAULT: 'red'
        },
    },
}

answered Oct 14, 2022 at 14:15

Ihar Aliakseyenka

14.8k5 gold badges51 silver badges58 bronze badges

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

3 Comments

kicaj Over a year ago

Maybe the /_preview of Tailwind incorrect show classes for borders like "border-red", "border-blue" when You prepare just colors, without setting "borderColor" in config?

Ihar Aliakseyenka Over a year ago

Not entirely sure I understood what do you mean. But the general use case for borders in Tailwind is to use BOTH classes as border will set border-width and border-color - border color. But if you will use ONLY border it will be colored as default one

Ihar Aliakseyenka Over a year ago

Like here second part - both buttons now have green border while in a first (no border color specified) - default current color

Collectives™ on Stack Overflow

Why Tailwind get border color from text-color class?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related