Proper way to do css animation on specific actions in livewire

Hello, I'm making a simple quiz app using Laravel, Livewire and Tailwindcss. This is first time using Livewire, and I'm stuck with logic for doing CSS animations. For example, let's say page shows 4 possible answers, and user selects incorrect one. Incorrect answer should be turned into red, and correct one to green. What should be proper way to do it? Here is piece of code in livewire blade component:

@foreach($currentQuestion->answers as $answer)
<div class="grid grid-cols-1 my-5 justify-center">
   <label class="flex items-center">
      <input id=question-{{$answer->id}} wire:click="userAnswered({{ $answer->id }})" type="checkbox">
         <p class="p-1 m-1">{{$answer->text}}</p>
   </label>
</div>
@endforeach

In livewire component I may add public function userAnswered($answerId) but what next, should I dispatch event ($this->dispatch('userAnswered', id: $answerId);) and make some JS code to add proper classes (bg-red and bg-green) to appropriate answers, or there is better approach?

Thanks in advance