Space Betweenv1.3.0+

@php $rows = collect([ ['space-x', ['margin-left']], ['space-y', ['margin-top']], ])->flatMap(function ($side) use ($page) { return $page->config['theme']['space']->map(function ($value, $name) use ($side) { $class = starts_with($name, '-') ? ".-{$side[0]}-".substr($name, 1) : ".{$side[0]}-{$name}"; $code = collect($side[1])->map(function ($property) use ($value) { return "{$property}: {$value};"; })->implode("\n"); return [$class, $code]; })->values(); });

$scroll = true; $scroll = isset($scroll) ? $scroll : true; $scroll = (count($rows) > 12 && ($scroll !== false)); @endphp

Class reference

Add horizontal space between children

Control the horizontal space between elements using the space-x-{amount} utilities.

@component('_partials.code-sample')

@slot('code')

@endslot @endcomponent

Add vertical space between children

Control the horizontal space between elements using the space-y-{amount} utilities.

@component('_partials.code-sample')

@slot('code')

@endslot @endcomponent

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

@component('_partials.code-sample')

@slot('code')

@endslot @endcomponent

---

Responsive

To control the space between elements at a specific breakpoint, add a {screen}: prefix to any existing space utility. For example, adding the class md:space-x-8 to an element would apply the space-x-8 utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample', ['class' => 'text-center']) @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

---

Customizing

Spacing scale

If you'd like to customize your values for space between, padding, margin, width, and height all at once, use the theme.spacing section of your tailwind.config.js file.

@component('_partials.customized-config', ['key' => 'theme.spacing'])

• sm: '8px',
• md: '16px',
• lg: '24px',
• xl: '48px', @endcomponent

To customize only the space between values, use the theme.space section of your tailwind.config.js file.

@component('_partials.customized-config', ['key' => 'theme.space'])

• sm: '8px',
• md: '16px',
• lg: '24px',
• xl: '48px', @endcomponent

Learn more about customizing the default theme in the theme customization documentation.

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'space', 'property' => 'space', ], 'variants' => [ 'responsive', ], ])