Laravel 8 Blade组件$attributes->merge传入class不生效如何解决？

Laravel 组件的$attributes->merge()方法对class属性的默认处理逻辑是追加拼接而非覆盖，你传入的px-0不会替换默认配置的px-4，最终生成的button元素会同时包含px-4和px-0两个类。
而Tailwind CSS生成样式规则时是按类名字典序排序输出的，px-0的字典序早于px-4，所以CSS文件中px-0的样式会定义在px-4前面，浏览器解析时后定义的px-4优先级更高，因此px-0不会生效。

方案1：使用Tailwind重要前缀（最便捷） #

调用组件时给需要覆盖的类加上!前缀，强制提升优先级，直接覆盖同属性的默认样式：

<x-green-button class="!px-0"
                title="Click to show or hide data entry for {{$person->firstname}}."
                wire:click="toggleVisibility({{$person->id}})">
  <h3 class="my-1">{{$person->FullName_fh}}</h3>
</x-green-button>

方案2：调整组件逻辑，允许传入class完全覆盖默认样式 #

修改green-button.blade.php组件代码，判断用户是否传入class属性，传入则完全替换默认类：

<button 
    {{ $attributes->merge(['type' => 'button']) }}
    @class($attributes->has('class') ? [$attributes->get('class')] : ['px-4 inline-flex justify-center py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500'])
>
    {{ $slot }}
</button>

方案3：自动合并冲突类（推荐长期使用） #

安装Laravel专用的tailwind-merge类库，可以自动识别并删除冲突的Tailwind类，调整组件代码如下：

@php
$defaultClasses = 'px-4 inline-flex justify-center py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500';
@endphp
<button 
    type="button" 
    class="{{ twMerge($defaultClasses, $attributes->get('class')) }}"
    {{ $attributes->except('class') }}
>
    {{ $slot }}
</button>

配置后不需要加特殊前缀，直接传入class="px-0"即可自动覆盖默认的px-4。

内容的提问来源于stack exchange，提问作者Robert Bryan Davis