# npm 安装
npm i preline

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/preline/preline.js',
    './src/**/*.{html,js,ts,jsx,tsx}'
  ],
  plugins: [
    require('preline/plugin')
  ]
}

<!-- CDN 快速引入 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js"></script>

// 在入口文件中初始化
import 'preline/preline'

<!-- 下拉菜单 -->
<div class="hs-dropdown relative inline-flex">
  <button id="hs-dropdown-default"
    type="button"
    class="hs-dropdown-toggle py-3 px-4 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 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-label="Dropdown">
    下拉菜单
    <svg class="hs-dropdown-open:rotate-180 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="m6 9 6 6 6-6"/></svg>
  </button>
 
  <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="hs-dropdown-default">
    <div class="p-1 space-y-0.5">
      <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
        href="#">
        选项一
      </a>
      <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
        href="#">
        选项二
      </a>
    </div>
  </div>
</div>

<!-- 所有交互组件通过 data-* 属性声明 -->
<div data-hs-overlay="#hs-overlay-example">
  <button type="button"
    class="hs-overlay-toggle 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">
    打开模态框
  </button>
</div>
 
<div id="hs-overlay-example"
  class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto"
  role="dialog"
  tabindex="-1"
  aria-labelledby="hs-overlay-example-label">
  <!-- 模态框内容 -->
</div>

# Next.js 项目
npm i preline
# 在 next.config.js 中配置 transpilePackages
 
# Laravel 项目
npm i preline
# 在 webpack.mix.js 或 vite.config.js 中引入

npm run build  # Tailwind 编译 + 项目构建

// React 中手动初始化
import { useEffect } from 'react'
import { HSStaticMethods } from 'preline/preline'
 
useEffect(() => {
  HSStaticMethods.autoInit()
}, [])

// Next.js / React 中的初始化
'use client'
import { useEffect } from 'react'
import { HSStaticMethods } from 'preline/preline'
 
export default function Layout({ children }) {
  useEffect(() => {
    const initPreline = async () => {
      const { HSStaticMethods } = await import('preline/preline')
      HSStaticMethods.autoInit()
    }
    initPreline()
  }, [])
 
  return <>{children}</>
}