Tabs active did not work properly

[eirfaniskandar123]

Summary

style for active tab did not apply

Steps to Reproduce

<div class="border-b border-gray-200">
                <nav class="flex gap-x-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                    <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none active" id="tabs-with-underline-item-1" aria-selected="true" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
                    Tab 1
                    </button>
                    <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-2" aria-selected="false" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
                    Tab 2
                    </button>
                    <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none" id="tabs-with-underline-item-3" aria-selected="false" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
                    Tab 3
                    </button>
                </nav>
            </div>
<div class="mt-3">
                <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
                    <p class="text-gray-500">
                    This is the <em class="font-semibold text-gray-800">first</em> item's tab body.
                    </p>
                </div>
                <div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
                    <p class="text-gray-500">
                    This is the <em class="font-semibold text-gray-800">second</em> item's tab body.
                    </p>
                </div>
                <div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
                    <p class="text-gray-500">
                    This is the <em class="font-semibold text-gray-800">third</em> item's tab body.
                    </p>
                </div>
            </div>

in my localhost page, i realize the active tab style did not apply but the tab seems work perfectly fine. this code is the same code as default tab in preline webpage.

Demo Link

https://preline.co/docs/tabs.html

Expected Behavior

No response

Actual Behavior

the style for active tab did not apply to it

Screenshots