Different color for different sides of borders

[mustafaaloko]

I couldn't find a way to give different colors to different sides of an element's borders. If I use border-green for example, all borders on 4 sides will take this color.

Is there any workaround I don't know about?

[MichaelDeBoey]

This is not (yet) supported at the moment

Maybe @adamwathan or @reinink can give some insight if this is planned or not.

If not, you can always add custom utilities yourself. 🙂

[adamwathan]

Hey @mustafaaloko! We decided not to support this level of complexity (at least right now) mainly to avoid bloat in the file size.

Tailwind ships with 73 colors out of the box and 5 breakpoints, which means there are already 365 border color utilities.

If we added per-side border colors, that would jump to 1825 classes.

We may still consider this in the future, but right now you have a couple workarounds based on your situation:

1. Create an additional wrapper element so you can style it separately.

   That means this imaginary unsupported code:

   <div class="border-t border-r border-t-green border-r-blue">
       <!-- ... -->
   </div
   

   ...would be rewritten as:

   <div class="border-t border-green">
       <div class="border-r border-blue">
           <!-- ... -->
       </div>
   </div>
   

2. Create a component class:

   .code-block {
       @apply .border .border-grey-light;
       border-left-width: config('borderWidths.4');
       border-left-color: config('borderColors.grey-dark');
   }
   

If neither of those work for your situation, please share the details, maybe we can figure out a good solution for you.

[mustafaaloko]

Good to know. Thanks @adamwathan for the explanation.

Thank you @MichaelDeBoey.

[mustafaaloko]

@adamwathan quick question, don't you think it's worth to be added to the documentation?

[adamwathan]

Yeah it would be good to talk about it in the documentation for sure 👍 I'll make a note of it.

[TomDeSmet]

Tailwind ships with 73 colors out of the box and 5 breakpoints, which means there are already 365 border color utilities.
If we added per-side border colors, that would jump to 1825 classes.

If I could add my two cents here. I'd rather have the extra functionality (which is default CSS behaviour) than all those colors I won't be using anyway.
Why does Tailwind has such a large color pallette baked in anyway? Every projects has its own color scheme depending on the client or designer.

If we need to make a choice between pre-defined colors or default CSS functionality, I'd like to have the latter!

[adamwathan]

You don’t have to choose, it’s very easy for you to write a plugin that provides per side border colors.

We ship with a large palette so the “try Tailwind via a CDN” experience is pleasant and doesn’t feel crazy restrictive. If the default configuration was light on colors, less people would have a fun first run experience which means fewer people adopting the framework over time.

border-color: red is default CSS functionality too, btw.

[jaschaio]

In case somebody else is searching for a solution, @simensen wrote a plugin for it: tailwindlabs/tailwindcss#560 (comment)