child selectors should exclude absolute positioned elements

[smeijer]

Describe the problem:

The generated child selectors for space and divide should exclude absolute positioned elements. The current selector includes elements that have been pulled out of the document flow.

For example, space-y-4 also applies the margin to an absolute positioned child element, and divide-y applies a border to it. See the codepen below.

/* this should also exclude > .absolute */
.space-x-5 > :not(template) ~ :not(template) {
    --space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--space-x-reverse)));
}

Link to a minimal reproduction:

https://codepen.io/smeijer/pen/vYGoVWe?editors=1010

[adamwathan]

Hey! Unfortunately this isn't really feasible — it's not possible for us to know if a child is absolutely positioned because any custom class could be adding that style.

These classes aren't meant to be anything fancy or sophisticated, they are just a shortcut for adding margin/borders to all but the first element in a group. Make sure the group only contains elements you actually want to target 👍🏻 If that's not possible, then just apply the margin/border manually to the children that should receive it like you would have done before these features were added.

Here's a fork of your Codepen that demonstrates how I would handle it:

https://codepen.io/adamwathan/pen/abNeRQB?editors=1010

[smeijer]

I did realize that. I just thought that it might make sense to add an exception for the .absolute class, as that one is "native".

But yeah, wrapping might be an OK workaround. Thanks for the fast response.