[v4] `space-y-52 prose` behave differently in TW4 vs. TW3

[tordans]

What version of @tailwindcss/typography are you using?

see https://play.tailwindcss.com/dXf3WCy385

What version of Node.js are you using?

see https://play.tailwindcss.com/dXf3WCy385

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction repository

https://play.tailwindcss.com/dXf3WCy385 – switching between v4 and v3 shows the difference

Describe your issue

In v3 the space-y-* added space even with prose present. In v4 those spaces are not there anymore.

<ul class="space-y-52 prose">
  <li>Line 1</li>
  <li>Line 2</li>
</ul>

V3

V4

[thecrypticace]

Hey! So this is due to the specificity of the space-y-* utility in v4 since it now uses :where(…). The reason for the implementation change was twofold:

• Performance: The old .space-y-52 > :not([hidden]) ~ :not([hidden]) selector could present performance issues on some documents. (the new selector is :where(.space-y-52 > :not(:last-child)))
• Easier customization: Because of the higher specificity it was harder to override the margin on a per child element basis and we decided that making sure people could do that was worth the breaking change from v3 -> v4.

For example, in v3 changing the first element's margin is more difficult than it should be. Either requiring an important modifier or enough variants to boost the specificity up just enough (also on the 2nd element because the implementation used margin-top instead of bottom). In v4 this "just works" as one might expect:

<ul class="space-y-52">
  <li class="mb-12">Line 1</li>
  <li>Line 2</li>
</ul>

This does mean that prose styles have a slightly higher specificity because of their selectors: .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) and those margins take precedence. You can work around this by using an important modifier though:

<ul class="space-y-52! prose">
  <li">Line 1</li>
  <li>Line 2</li>
</ul>

The tl;dr is that this is expected for v4.