Blade Components + TailwindCSS class priority?

Does anyone have any ideas on how I can make a class via Laravel attribute forwarding take precedence over whatever default style is on the component?

  <!-- Component -->
  <x-button class="bg-red-500" />

  <!-- /resources/views/components/button.blade.php -->
  <button {{ $attributes->merge(['class' => 'bg-green-500 rounded shadow-sm']) }}>
    {{ $slot }}
  </button>

Basically what I want is if bg-red-500 is provided, then make it overwrite the default bg-green-500 but keep the other classes, otherwise just use bg-green-500.

MichalOravec

5 years ago

Level 75

<x-button color="red" />

@props(['color' => 'green'])

<button {{ $attributes->merge(['class' => 'bg-'.$color.'-500 rounded shadow-sm']) }}>
    {{ $slot }}
</button>

JoeyNL

5 years ago

Level 8

FYI; While this seems like a really nice solution, watch out in combination with PurgeCSS. Because these 'dynamic classes' are not recognised by default! This can lead up to missing classnames on production environments.

2 likes

tykus

5 years ago

Level 104

You have no control over the order of priority and attribute merging is not smart enough to know that bg-red-X and bg-green-X are essentially the same rules. You are best to use a custom prop for this.

forrestedw

3 years ago

Level 3

Just in case anyone else stumbles on this tailwind have recommendations on all this now here :

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Please or to participate in this conversation.