HTML element from livewire not applying tailwind css correctly

I'm making a livewire dev using vite and it has a function where html elements are generated and sent to the ui component but for some reason, unless i have a static code at the same page which contains the same class, the css at the page are not applying correctly for the produced element

app.blade.php

 @vite(['resources/css/app.css', 'resources/js/app.js'])

activityDetail.php

 $r .= '<li><div @click="selectId = ' . $activityDetail['id'] . '" wire:click="getDetail(' . $activityDetail['id'] . ')"
            :class="{\'cursor-pointer pl-2 rounded-lg bg-teal-500 text-white\': selectId === ' . $activityDetail['id'] . ', \'cursor-pointer pl-2 hover:bg-teal-50 hover:rounded-lg\': selectId !== ' . $activityDetail['id'] . '}">' . $activityDetail['title'] . '</div>';
            if (!empty($activityDetail['child'])) {
                $r .= '<ul class="px-4 space-y-1 list-inside">';
                $r .= $this->generateList($activityDetail['child']);
                $r .= '</ul>';
            }
            $r .= '</li>';

ui.blade.php (the element exist but no css effects)

 @if (!empty($listActivity))
                    {!! $listActivity !!}
                @endif

ui.blade.php (works)

 @if (!empty($listActivity))
                    {!! $listActivity !!}
                @endif
                <div>
                    <ul>
                        <li class="text-white hover:bg-teal-50 hover:text-slate-700 bg-teal-500"></li>
                    </ul>
                </div>

in the end i just moved some parts of the generated into the view

 @if (!empty($listActivity))
                    <li>
                        <div @click="selectId = $root['id']" wire:click="getDetail({{ $root['id'] }})"
                            :class="{
                                'cursor-pointer pl-2 rounded-lg bg-teal-500 text-white': selectId ===
                                    {{ $root['id'] }},
                                'cursor-pointer pl-2 hover:bg-teal-50 hover:rounded-lg': selectId !==
                                    {{ $root['id'] }}
                            }">
                            {{ $root['title'] }}
                        </div>
                        {!! $listActivity !!}
                    </li>
                @endif

so the generated only have this:

  $r .= '<ul class="px-2 space-y-1 list-inside">';
                $r .= $this->generateList($activityDetail['child']);
                $r .= '</ul>';