如何为Preline UI所有hs-类适配Tailwind前缀？

我正在尝试让Preline UI适配Tailwind前缀，已经找到offcanvas组件的解决办法，但无法将方案推广到select、dropdown等其他组件。这个问题和Tailwind CSS本身无关——Tailwind自带的类添加前缀后可以正常工作，只有Preline的hs-开头的类会出现异常。

Preline官方文档仅说明了Tailwind前缀的添加方式，并未提及该问题的通用解决方案。想请教是否存在能适配所有含hs-类元素的通用方案？

可正常工作的代码 #

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
  <button id="@@id" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-200 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
  </button>

  <div class="hs-dropdown-menu absolute top-full right-0 hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white rounded-xl shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="@@id">
    <div class="p-1">
      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-detm">
        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
        Edit team
      </button>
      
    </div>
  </div>
</div>

无法正常工作的代码 #

<div class="hs-dropdown [--placement:bottom-right] had-relative had-inline-flex  [&.open]:had-translate-x-0 ">
  <button id="@@id" type="button" class="had-size-7 had-inline-flex had-justify-center had-items-center had-gap-x-2 had-rounded-lg had-border had-border-transparent had-text-gray-500 hover:had-bg-gray-100 disabled:had-opacity-50 disabled:had-pointer-events-none focus:had-outline-none focus:had-bg-gray-200 dark:had-text-neutral-400 dark:hover:had-bg-neutral-700 dark:focus:had-bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
  </button>

  <div class="hs-dropdown-menu had-absolute had-top-full had-right-0 hs-dropdown-open:opacity-100 had-w-40 had-transition-[opacity,margin] had-duration had-opacity-0 had-hidden had-z-10 had-bg-white had-rounded-xl had-shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:had-shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:had-bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="@@id" data-hs-overlay-options='{"hiddenClass":"had-hidden"}'>
    <div class="p-1">
      <button type="button" class="had-w-full had-flex had-items-center had-gap-x-3 had-py-1.5 had-px-2 had-rounded-lg had-text-[13px] had-font-normal had-text-gray-800 hover:had-bg-gray-100 disabled:had-opacity-50 disabled:pointer-events-none focus:had-outline-none focus:had-bg-gray-100 dark:had-text-neutral-300 dark:had-hover:bg-neutral-800 dark:had-focus:bg-neutral-800" data-hs-overlay="#hs-pro-detm">
        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
        Edit team
      </button>
      
    </div>
  </div>
</div>

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