border-collapse: collapse is problematic in Safari

[vladmoroz]

Preflight styles set border-collapse: collapse, which bugs how semi-transparent borders are rendered in Safari.

Given this CSS:

table {
  border-collapse: collapse;
}

th, td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

Chrome and Firefox render the border once:

Safari renders the border twice, so it appears stronger:

More of a Safari than a Tailwind issue per se, but the blast radius for using a potentially bugged property is quite large. In my projects I'm resetting border-collapse: unset to avoid this.

What version of Tailwind CSS are you using?

v3 / v4

What browser are you using?

Safari

Reproduction URL

https://jsfiddle.net/e0vgLphy/9/

[adamwathan]

Wow that's horrible 😖 Do you do anything to work around the extra space that's rendered inside the table cells?

[vladmoroz]

Just border-spacing: 0 and I never style adjacent borders 🤷‍♂️