Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add border edge color support #2506

Closed
wants to merge 12 commits into from

Conversation

weyert
Copy link

@weyert weyert commented Oct 6, 2020

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:

CleanShot 2020-10-06 at 02 29 25@2x

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

@weyert weyert changed the title Add border corner color support Add border edge color support Oct 6, 2020
@adamwathan adamwathan force-pushed the master branch 2 times, most recently from f3893d1 to 55dcc53 Compare October 7, 2020 18:14
@adamwathan
Copy link
Member

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.

@adamwathan adamwathan closed this Oct 9, 2020
@SalathielGenese
Copy link

SalathielGenese commented Dec 7, 2020

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
Copy link

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

@jonnywilliamson
Copy link

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
Copy link

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
Copy link

I guess this is coming in #4404 now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants