Tailwindcss: Add border-y and border-x

[jvanbaarsen]

Today I was working on a feature, where I wanted to have a border on both the left and right side. This is easily done with border-l and border-r, but it got me thinking, when using padding and marging I can easily do mx-#.

Would it make sense to also add a border-y-# and border-x-#? If so I would love to add that feature :-)

[adamwathan]

Hey @jvanbaarsen! I think this isn't a bad idea but there's two things I worry about:

1. Adding these two utilities means 50 new classes (2 side definitions * 5 border sizes * 5 breakpoints) which isn't nothing when it comes to the outputted file size

2. It's a little confusing that border-x means adding two vertical borders, and border-y means adding two horizontal borders. It's consistent with how the rest of the framework works for sure but it's not as intuitive as the other utilities.

For that reason I think we're going to hold on this for now, but we can always revisit later. The hardest part about open source is that when you say yes, it's yes forever; no is only no for now 👍

[jvanbaarsen]

@adamwathan Cool! Thanks for explaining :)

[frederikhors]

@adamwathan I think now with divide we need this: border-y and border-x.

For me tailwind is to be used only as a generator, so the new 50 classes is not a problem even in development.

With these new classes I'll save a lot of repetion: border-l border-r = border-x, border-t border-b = border-y = AMAZING!

Please, can you reconsider it today?