Skip to content Skip to footer navigation
Light theme Dark theme

Classes Modifier

This conditionally compiles a CSS class string using Laravel's Arr::toCssClasses() method.

The modifier expects an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression.

is_active: false
has_error: true
<div class="text-sm {{ ['p-4' => true, 'font-bold' => is_active, 'bg-red' => has_error] | classes }}">
  //
</div>
<?php
  $classes = Statamic::modify([
    'p-4' => true,
    'font-bold' => $is_active,
    'bg-red' => $has_error
  ])->classes();
?>
 
<div class="text-sm {{ $classes }}">
  //
</div>

You can also use Blade's @class directive:

<div @class([
  'text-sm',
  'p-4',
  'font-bold' => $is_active,
  'bg-red' => $has_error
])
>
  //
</div>
<div class="text-sm p-4 bg-red">
  //
</div>