通过CDN在浏览器使用Preline组件库时JavaScript失效问题

问题分析 #

你使用Preline的基础Modal组件，通过CDN引入Preline JS后，点击按钮仅页面变暗，但Modal内容不显示。核心原因是CDN版Tailwind默认未加载Preline的自定义插件与样式变体，导致组件的交互样式无法正常生效。

可行解决方案 #

1. 配置Tailwind启用Preline插件 #

在HTML头部添加Tailwind配置脚本，将Preline插件纳入Tailwind的插件列表，这是解决CDN环境下Preline组件失效的关键步骤：

修改后的<head>代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sample</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/preline@2.4.1/dist/preline.min.js"></script>
    <script>
      tailwind.config = {
        plugins: [
          window.preline.plugins
        ]
      }
    </script>
</head>

2. 手动初始化Modal组件（可选） #

若自动初始化失效，可在DOM加载完成后手动触发Preline Modal的初始化：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    window.HSOverlay.init();
  });
</script>

将这段代码放在Preline JS脚本之后。

3. 调整Modal层级（排查用） #

若页面存在其他高z-index元素导致Modal被覆盖，可提升Modal容器的层级：
将Modal容器的z-[80]修改为z-[100]：

<div id="hs-basic-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[100] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" ...>

4. 验证完整代码示例 #

调整后的完整HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sample</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/preline@2.4.1/dist/preline.min.js"></script>
    <script>
      tailwind.config = {
        plugins: [
          window.preline.plugins
        ]
      }
    </script>
</head>

<body>
  <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-basic-modal" data-hs-overlay="#hs-basic-modal">
    Open modal
  </button>
  
  <div id="hs-basic-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[100] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-basic-modal-label">
    <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto">
        <div class="flex justify-between items-center py-3 px-4 border-b">
          <h3 id="hs-basic-modal-label" class="font-bold text-gray-800">
            Modal title
          </h3>
          <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-basic-modal">
            <span class="sr-only">Close</span>
            <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">
              <path d="M18 6 6 18"></path>
              <path d="m6 6 12 12"></path>
            </svg>
          </button>
        </div>
        <div class="p-4 overflow-y-auto">
          <p class="mt-1 text-gray-800">
            This is a wider card with supporting text below as a natural lead-in to additional content.
          </p>
        </div>
        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t">
          <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-basic-modal">
            Close
          </button>
          <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
            Save changes
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      window.HSOverlay.init();
    });
  </script>
</body>

</html>

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