Divide Widthv1.3.0+

@php $rows = collect([ ['divide-x', ['border-left-width']], ['divide-y', ['border-top-width']], ])->flatMap(function ($side) use ($page) { return $page->config['theme']['divideWidth']->map(function ($value, $name) use ($side) { $suffix = $name === 'default' ? '' : "-{$name}"; $class =".{$side[0]}{$suffix}"; $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 borders between horizontal children

Add borders between horizontal elements using the divide-x-{amount} utilities.

@component('_partials.code-sample')

@slot('code')

@endslot @endcomponent

Add borders between stacked children

Add borders between stacked elements using the divide-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 divide-x-reverse or divide-y-reverse utilities to ensure the border is added to the correct side of each element.

@component('_partials.code-sample')

@endcomponent

---

Responsive

To control the borders between elements at a specific breakpoint, add a {screen}: prefix to any existing divide utility. For example, adding the class md:divide-x-8 to an element would apply the divide-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

Divide width scale

The divide width scale inherits its values from the borderWidth scale by default, so if you'd like to customize your values for both border width and divide width together, use the theme.borderWidth section of your tailwind.config.js file.

@component('_partials.customized-config', ['key' => 'theme.borderWidth']) default: '1px', '0': '0', '2': '2px',

• '3': '3px', '4': '4px',
• '6': '6px',

• '8': '8px', @endcomponent

To customize only the divide width values, use the theme.divideWidth section of your tailwind.config.js file.

@component('_partials.customized-config', ['key' => 'theme.divideWidth']) default: '1px', '0': '0', '2': '2px',

• '3': '3px', '4': '4px',
• '6': '6px',

• '8': '8px', @endcomponent

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

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