Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lara16177's avatar

Override class attributes in blade component

How do you override class attributes that are defined on a blade component? For example, given the following blade component:

<div {{ $attributes->merge(['class' => 'bg-red-500']) }}>
  {{ $slot }}
</div>

I can use the above as follows:

<x-component class='text-gray-700'>
  // some content for the slot
</x-component>

That sets the colour of the text to be gray and works fine, however, if I want to change the background colour from red to blue for example, adding it to the <x-component> class list doesn't work.

<x-component class='text-gray-700 bg-blue-500'>
 // some content for the slot
</x-component>

The component background remains red. How do I override this?

0 likes
8 replies
Swaz's avatar

Your code is technically working. The bg-blue-500 class is being merged into the component, but bg-red-500 has higher priority in your css file.

I believe this would best be done with props.

@props(['background' => 'bg-red-500'])

<div {{ $attributes->merge(['class' => 'text-white ' . $background]) }}>
  {{ $slot }}
</div>

<x-component background="bg-blue-500">
    // some content for the slot
</x-component>
3 likes
pelachile's avatar

What if you want to reuse the component in different areas of the app but apply different classes?

1 like
authanram's avatar

@lara16177

as of tailwind 3+, you can override existing class selectors by prepending the important operator:

<x-component class="text-gray-700 !bg-blue-500">
	// some content for the slot
</x-component>
13 likes

Please or to participate in this conversation.