Blade组件中Tailwind样式问题：单选按钮背景色异常

问题出在依赖Tailwind的peer-checked伪类结合Livewire实时绑定时，可能出现DOM状态与组件状态不同步，导致未选中选项的背景色无法正确重置。直接通过Livewire的组件状态来动态设置样式即可解决。

修改后的组件代码：

@props(['label', 'name'])

@php
$options = [
    'Employer' => 'employer',
    'Applicant' => 'applicant',
];
@endphp

<div class="flex border-2 border-teal-500 rounded-lg">
    @foreach ($options as $optionLabel => $optionValue)
    <input wire:model.live="{{ $name }}" type="radio" name="{{ $name }}" id="{{ $optionValue }}"
        value="{{ $optionValue }}" class="hidden">
    <label for="{{ $optionValue }}"
        class="flex-1 py-2 px-4 font-semibold cursor-pointer focus:outline-none transition-colors duration-200 
        {{ $wire->$name === $optionValue ? 'bg-teal-500 text-white' : 'bg-white text-teal-500' }}
        {{ $loop->first ? 'border-r border-teal-500 rounded-l-md' : '' }} 
        {{ $loop->last ? 'rounded-r-md' : '' }}">
        {{ $optionLabel }}
    </label>
    @endforeach
</div>

关键修改点： #

• 移除了input的peer类和label的peer-checked:*类
• 通过$wire->$name === $optionValue直接判断当前选项是否为选中状态，动态设置背景色和文字颜色
• 样式完全由Livewire的组件状态控制，避免DOM状态不同步的问题

内容的提问来源于stack exchange，提问作者Mahfuz Abdallah