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>