Stacks

app.js

import Alpine from 'alpinejs'
import stack from './stack'

window.Alpine = Alpine
Alpine.plugin(stack)
Alpine.start()

stack.js

export default function (Alpine) {
    Alpine.directive('stack', (el, {}, { cleanup }) => {
        let setStackSpaceCollapse = () => {
            el.querySelectorAll('[class*="stack-space-collapse"]').forEach(el => {
                el.setAttribute('data-stack-space-collapse', getComputedStyle(el).getPropertyValue('--stack-space-collapse') || 'false');
            });
        };

        setStackSpaceCollapse();

        window.addEventListener('resize', setStackSpaceCollapse);

        cleanup(() => {
            window.removeEventListener('resize', setStackSpaceCollapse)
        })
    })
}

tailwind.config.js

plugin(function ({ addUtilities, matchUtilities, theme }) {
    matchUtilities(
        {
            'stack': (value) => ({
                '> *': {
                    '--stack-space': value,
                },
                '> *:not(.no-space-y, .no-space-b) + *:not(.no-space-y, .no-space-t)': {
                    'margin-block-start': `var(--stack-item-space, var(--stack-space, ${theme('spacing.16')}))`
                },
            }),
            'stack-space': (value) => ({
                '--stack-item-space': value,
                '&:is([class*="stack-"][class*="stack-space-"] > *)': {
                    '--stack-item-space': value,
                },
            }),
        },
        { values: theme('spacing') }
    );
    addUtilities({
        '[class*="stack-"][class*="stack-space-"]': {
            '& > *': {
                '--stack-item-space': 'initial',
            },
        },
        '.stack-space-inherit': {
            '--stack-item-space': 'initial',
            '&:is([class*="stack-"][class*="stack-space-"] > *)': {
                '--stack-item-space': 'initial',
            },
        },
        '[data-stack-space-collapse="true"] + [data-stack-space-collapse="true"]': {
            '--stack-item-space': 0,
            '&:is([class*="stack-"][class*="stack-space-"] > *)': {
                '--stack-item-space': 0,
            },
        },
        '.stack-space-collapse': {
            '--stack-space-collapse': 'true',
        },
        '.stack-space-block': {
            '--stack-space-collapse': 'false',
        }
    });
})