Add border edge color support

[weyert]

This pull request introduces support to define a colour of a specific border of an element, e.g.:

    <div class="bg-transparant border-t-4 border-0 border-t-yellow-500 w-64 h-64">
      My Dummy
    </div>

would give:

I have added a unit test for the borderColor-plugin to test the appropriate classes get generated

[adamwathan]

Hey thanks for the PR! This has been discussed before and unfortunately we've decided not to include this for now. Here's an existing discussion:

tailwindlabs/discuss#46

Maybe we'll add it one day or come up with a way to enable it optionally but for now I would recommend just using two elements to create any shapes that need a different border color on each side.

[SalathielGenese]

Hi @adamwathan ,

I followed from tailwindlabs/discuss#46...

I want to create a full-CSS arrow leveraging tailwind.
I'd expect that I could have the same width on all borders but different colors.

PS: Maybe it can be an opt-in feature? I suggest it to be.

Thanks.

[themagickoala]

@adamwathan is this on the cards again now that the JIT compiler exists?

[jonnywilliamson]

Just stumbled across this because that's exactly what I was hoping to do, use different colour borders to make a CSS arrow.

This seems like the exact problem the JIT engine was designed to eliminate!

[jonnywilliamson]

Actually just in case it helps anyone looking for a way to made a css arrow with tailwind, this did the job for me:

https://stackoverflow.com/a/67133568/659786

[themagickoala]

I guess this is coming in #4404 now?