[1.6.0] Should space-y-x add margin for hidden?

[afuno]

For example, there is a list like this:

<div class="flex flex-col space-y-32">
  <div class="flex flex-col space-y-32">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>

  <div class="flex flex-col space-y-32">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>
</div>

But sometimes I need to hide the nested list wrapper as it is empty:

<div class="flex flex-col space-y-32">
  <div class="flex flex-col space-y-32">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>

  <div class="hidden"></div>
</div>

Now space-y sees hidden and adds margin to it.
Is there any way to avoid this?

[romanzipp]

I ran into a similar issue when adding a space-y-* to Laravel <form> elements. It looks like the space class also creates a margin after the @csrf / <input type="hidden" name="_token" value="..."> hidden input.

[adamwathan]

Best solution is to not include hidden elements in the same parent. Wrap the elements that need to be spaced with their own div and keep the hidden stuff out.

[afuno]

But what if it's necessary? Or is there no other solution? Only transferring to another location?

[adamwathan]

If it's necessary then I would recommend not using the space utilities in that case and simply falling back to using margin utilities like before:

<div class="flex flex-col">
  <div class="flex flex-col">
    <div><!-- ... --></div>
    <div class="mt-32"><!-- ... --></div>
    <div class="mt-32"><!-- ... --></div>
  </div>

  <div class="hidden"></div>
</div>

[afuno]

Okay. Thanks for the answer.

[romanzipp]

You could also create a specific style which ignores certain other characteristics like the .hidden class, but I would not recommend that. Example as tailwind plugin:

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function ({ addComponents, theme }) {
    addComponents({
        '.custom-spaced': {
            '& > :not(template):not(.hidden) ~:not(template):not(.hidden)': {
                '--space-y-reverse': 0,
                marginTop: `calc(${theme('space.4')} * calc(1 - var(--space-y-reverse)))`,
                marginBottom: `calc(${theme('space.4')} * var(--space-y-reverse))`
            }
        }
    });
});