Prose class: first and last text element don't have 0 top en bottom margin respectively when using article block

[kobe-f8]

I've noticed that a feature from the tailwind prose class isn't working as expected when using the article block. When you wrap some text in a div and apply the prose class, the first child loses it's top margin and the last text element loses it's bottom margin. But in peak the text you type is wrapped in a div inside the prose div, so the margin correction isn't applied.

Text inside div:

<!-- /components/_text.antlers.html -->
<div class="size-md">
    {{ text }}
</div>
<!-- End: /components/_text.antlers.html -->

Text without being wrapped in a div

<!-- /components/_text.antlers.html -->
    {{ text }}
<!-- End: /components/_text.antlers.html -->

As you can see when the text elements are directly inside the prose class, the margins are correct.
Is there a way to keep the peak bard-set size classes .size-md, .size-lg, .size-xl by being wrapped in a div, but still have correct margins applied from the tailwind prose class.

[robdekort]

Good find. I think this should work:

.prose :where(.prose > div > :first-child):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
}
.prose :where(.prose > div > :last-child):not(:where([class~="not-prose"] *)) {
    margin-bottom: 0;
}

[robdekort]

You could add this to the plugin array in tailwind.typography.config.js:

plugin(function({ addBase }) {
  addBase({
    // Manually add TW Typography exception needed due to the extra nesting Peak uses in prose partials.
    '.prose :where(.prose > div > :first-child):not(:where([class~="not-prose"] *))': {
      marginTop: '0 !important',
    },
    '.prose :where(.prose > div > :last-child):not(:where([class~="not-prose"] *))': {
      marginBottom: '0 !important',
    },
    '.not-prose': {
      margin: '2rem 0 !important',
    }
  })
}),

[robdekort]

Hey @kobe-f8, I just fixed this in the latest release: https://github.com/studio1902/statamic-peak/releases/tag/v5.15

[kobe-f8]

Awesome! 🚀