Stack utilities

[robdekort]

In my Statamic (CMS) Starter Kit called Peak, I use a page builder approach where all blocks within the page builder get space between them by putting them in a one column grid with gaps. This quickly becomes limiting when you want certain blocks to have no spacing above or below them.

I expanded upon the space-y utilities and thought that this could be nice idea to add to Tailwind core.

The utilities I added are the following:

// Stack utilities.
plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    {
      stack: (value) => ({
        '> *': {
           '--stack-space': value,
        },
        '> *:not(.no-space-y, .no-space-b) + *:not(.no-space-y, .no-space-t)': {
          marginBlockStart: 'var(--stack-space, 4rem)'
        },
      }),
    },
    { values: theme('spacing') }
  )
}),

// Stack gap utilities.
plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    {
      'stack-space': (value) => ({
        '--stack-space': value,
      }),
    },
    { values: theme('spacing') }
  )
}),

This way you can do this in your HTML:

<main class="stack-16">
  <section></section>
  <section class="no-space-y">No space above this and above next sibling</section>
  <section></section>
  <section class="stack-space-8">Less space above</section>
</main>

Which would compile to:

.stack-16 {
    --stack-space: 4rem;
}
.stack-16 > *:not(.no-space-y, .no-space-b) + *:not(.no-space-y, .no-space-t) {
    margin-block-start: var(--stack-space, 4rem);
}
.stack-space-8 {
    --stack-space: 2rem;
}

You can also use arbitrary values and modifiers like stack-[5px] md:stack-16

This is the relevant PR to my public kit.

Curious if this something you like.

Best,

Rob

[marcorieser]

Even putting the 4rem part in a custom property would allow to overwrite the space on child elements:

/* from */
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}

/* to */
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y: 4rem;
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--tw-space-y) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--tw-space-y) * var(--tw-space-y-reverse));
}