Route::get('/conditional-styling', function () {
    return view('conditional-styling.ifdirective', ['showRed' => true]);
});

When we visit our route, we should get the red background.

In addition to @if, Blade also provides @else, @elseif, and @unless directives to handle more complex conditional logic. These directives can be used to add different styles to an element based on multiple conditions. For example:

@if ($color == 'red')
    <div style="background-color: red;">
        Red Background
    </div>
@elseif ($color == 'blue')
    <div style="background-color: blue;">
        Blue Background
    </div>
@else
    <div>
        No background color
    </div>
@endif

Route::get('/conditional-styling-two', function () {
    return view('conditional-styling.ifelsedirective', ['color' => 'blue']);
});

In addition to the @if directive, Laravel Blade provides the @class and @style directives for applying conditional CSS classes and styles respectively.

The @class directive is used to apply a CSS class to an HTML element conditionally. This directive accepts an array as an argument and applies a class to the element if the element is “truthy”. For example:

<div @class(['p-4' => $isActive])>
    Test
</div>

Route::get('/conditional-styling-three', function () {
    return view('conditional-styling.styleclassdirective', ['isActive' => true]);
});

In the example above, the p-4 class will appear if the $isActive variable is set to true.

Similarly, the @style directive is used to apply inline CSS styles conditionally. This directive accepts an associative array of CSS properties and values as an argument, and applies those properties to the element if the provided variable is “truthy”. For example:

<span @style([
    'background-color: green',
    'font-weight: bold' => $isActive,
])>Style Test</span>

In the @style example, the background-color will always appear, but font-weight of bold is only applied when the $isActive variable is truthy.

Using @class and @style directives can make your Blade templates cleaner and more readable by reducing the amount of inline styles and classes you have to include in your HTML code.

https://github.com/dinocajic/youtube-laravel