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 new border-spacing utilities #7102

merged 3 commits into from Mar 4, 2022

Add new border-spacing utilities #7102

merged 3 commits into from Mar 4, 2022


Copy link

@JuanM04 JuanM04 commented Jan 17, 2022

Fixes #380

This PR adds border-spacing-{value}, border-spacing-x-{value} and border-spacing-y-{value} utilities (MDN reference).

<table class="border-separate border-spacing-4">
 <!-- ... -->

@reinink reinink self-requested a review March 2, 2022 18:25
Copy link

reinink commented Mar 4, 2022

@JuanM04 Hey thanks so much for this contribution!

I've made some updates to your PR. Instead of relying on the border-separate class to set the --tw-border-spacing-x and --tw-border-spacing-y variables, I instead added these as base variables — meaning you don't need to use border-separate to use these new utilities. This is useful in situations where people are not using our CSS reset (Preflight), and are relying on the browser default for tables (border-collapse: separate).

@reinink reinink merged commit dbb5b1d into tailwindlabs:master Mar 4, 2022
@reinink reinink changed the title Added border-spacing utility Add new border-spacing utilities Mar 4, 2022
@JuanM04 JuanM04 deleted the border-spacing branch March 4, 2022 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

Border Spacing
2 participants