Posts Learn Components Snippets Categories Tags About

Laravel Blade @class Directive

Learn what Laravel Blade @class directive is and how to use it to conditionally comile class into string

Created on Jul 23, 2021


The @class directive conditionally compiles a CSS class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:

Blade @class Directive Example
    $isActive = false;
    $hasError = true;

<span @class([
    'font-bold' => $isActive,
    'text-gray-500' => ! $isActive,
    'bg-red' => $hasError,

<span class="p-4 text-gray-500 bg-red"></span>

Snippets by

PostSrc poster


Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Laravel Blade @class Directive


PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets