40. Directiva @class

La directiva @class permite compilar condicionalmente una cadena de clase CSS. Se le puede pasar una matriz de clases donde la clave de la matriz contiene la clase o clases que deseas agregar, mientras que el valor es una expresión booleana. Si el elemento de la matriz tiene una clave numérica, siempre se incluirá en la lista de clases representadas.

En el siguiente ejemplo, se utiliza la directiva @class para agregar diferentes clases según el estado de las variables $isActive y $hasError. También se incluye una versión estática de las clases para comparar:

@php
    $isActive = false;
    $hasError = true;
@endphp
 
<span @class([
    'p-4',
    'font-bold' => $isActive,
    'text-gray-500' => ! $isActive,
    'bg-red' => $hasError,
])></span>
 
<span class="p-4 text-gray-500 bg-red"></span>

De manera similar, la directiva @style se puede utilizar para agregar estilos CSS en línea de forma condicional a un elemento HTML. En este ejemplo, se agrega la propiedad background-color: red y se cambia la propiedad font-weight según el valor de la variable $isActive:

@php
    $isActive = true;
@endphp
 
<span @style([
    'background-color: red',
    'font-weight: bold' => $isActive,
])></span>
 
<span style="background-color: red; font-weight: bold;"></span>

Recuerda que utilizar estas directivas puede mejorar la legibilidad y el mantenimiento de tu código, y también puede tener un impacto positivo en la optimización para motores de búsqueda al permitirte agregar clases y estilos de forma condicional.