Many times we need to configure a component indicating a default class but that it can be customized when consuming the Laravel component, for example, a letter component, in which, by default we use a white color for the background but, at the moment If another background color is selected, white is not used.

The Challenge: Avoid Style Conflicts

Suppose we have a card component that uses Tailwind CSS classes for styling. Simultaneously loading default styles and user-defined styles can cause conflicts. Specifically, one set of styles could override the other, depending on the order in which they appear in the style sheet.

To address this challenge, we can leverage component props to provide default values. This way we ensure that the default styles are applied unless explicitly modified by the user.

Using Props for Customization

Let's create a card component in Laravel that allows users to customize the background color. We will define a default background color (white) and define the option to set a different color using props.

<!-- card.blade.php -->

@props(['id' => null, 'bg' => 'bg-white'])

@isset($logo)
    <div>
        {{ $logo }}
    </div>
@endisset

<div {!! $attributes->merge(['class' => 'w-full mt-2 '. $bg .' shadow-md overflow-hidden']) !!}>

    @isset($extra)
        <div class="border-b border-gray-200">
            {{ $extra }}
        </div>
    @endisset

    @isset($title)
        <div class="border-b border-gray-200">
            <div class="px-3 pb-1 pt-2">
                {{ $title }}
            </div>
        </div>
    @endisset

    <div class="px-3 py-2">
        {{ $slot }}
    </div>

</div>

And this is precisely a very important point, avoiding using the white background color and not the one specified at the time of consuming the component, specifically we are talking about tailwind classes, since loading both at the same time will bring the problem of that one of them will override the other depending on which part of the style sheet is being used; to avoid this, we can use props at the component level, giving a default value:

@props(['id' => null, 'bg' => 'bg-white'])

And from the component, we inject it as follows:

@props(['id' => null, 'bg' => 'bg-white'])

@isset($logo)
    <div>
        {{ $logo }}
    </div>
@endisset

<div {!! $attributes->merge(['class' => 'w-full mt-2 '. $bg .' shadow-md overflow-hidden']) !!}>

    @isset($extra)
        <div class="border-b border-gray-200">
            {{ $extra }}
        </div>
    @endisset

    @isset($title)
        <div class="border-b border-gray-200">
            <div class="px-3 pb-1 pt-2">
                {{ $title }}
            </div>
        </div>
    @endisset

    <div class="px-3 py-2">
        {{ $slot }}
    </div>

</div>

Then, when using the previous component, which is called card.blade.php, if we want to use the default color of the card, which would be white:

<x-card class="mb-10">
   content
</x-card>

Or if we want to select another background color, for example, purple:

<x-card class="mb-10" bg="bg-purple-300">
   content
</x-card>

And in this easy way, we can use these same steps to any other class that does not necessarily have to be the background color with the components in Laravel.