Divide Colorv1.3.0+

@php $rows = $page->config['theme']['colors']->flatMap(function ($colors, $name) { if (is_string($colors)) { return [ [".divide-{$name}", "border-color: {$colors};"] ]; }

return collect($colors)->map(function ($value, $key) use ($name) {
  $class = ".divide-{$name}-{$key}";
  $code = "border-color: {$value};";
  return [
    $class,
    $code,
  ];
});

})->values()->all();

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

Class reference

Usage

Control the border color between elements using the divide-{color} utilities.

@component('_partials.code-sample')

@slot('code')

@endslot @endcomponent

Changing opacityv1.4.0+

Control the opacity of borders between elements using the .divide-opacity-{amount} utilities.

@component('_partials.code-sample', ['style' => "background-image: url('/img/transparent-bg.svg')"])

@slot('code')

@endslot @endcomponent

Learn more in the divide opacity documentation.

---

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

Border Colors

By default Tailwind makes the entire default color palette available as divide colors.

You can customize your color palette by editing the theme.colors section of your tailwind.config.js file, customize just your border and divide colors together using the theme.borderColor section, or customize only the divide colors using the theme.divideColor section.

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

• ...theme('borderColors'),

• 'primary': '#3490dc',
• 'secondary': '#ffed4a',
• 'danger': '#e3342f', @endcomponent

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