# 安装 Flowbite 和 Flowbite 插件
npm install flowbite
 
# 在 tailwind.config.js 中配置

// tailwind.config.js
module.exports = {
  content: [
    "./node_modules/flowbite/**/*.js"
  ],
  plugins: [
    require('flowbite/plugin')
  ]
}

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

<!-- 按钮 -->
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
  默认按钮
</button>
 
<!-- 模态框 -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal"
  class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
  type="button">
  打开模态框
</button>
 
<div id="default-modal" tabindex="-1" aria-hidden="true"
  class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
  <div class="relative p-4 w-full max-w-2xl max-h-full">
    <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
      <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">模态框标题</h3>
      </div>
      <div class="p-4 md:p-5 space-y-4">
        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">模态框内容</p>
      </div>
    </div>
  </div>
</div>

<!-- 所有组件都是 Tailwind 类名 + data 属性 -->
<div data-accordion="collapse">
  <h2 id="accordion-heading">
    <button type="button"
      class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
      data-accordion-target="#accordion-body"
      aria-expanded="true"
      aria-controls="accordion-body">
      <span>手风琴标题</span>
    </button>
  </h2>
  <div id="accordion-body" class="hidden" aria-labelledby="accordion-heading">
    <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
      内容区域
    </div>
  </div>
</div>

# React 项目
npm install flowbite-react
 
# Vue 项目
npm install flowbite-vue
 
# Svelte 项目
npm install flowbite-svelte

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

// React
import { Modal, Dropdown } from 'flowbite-react'
 
// Vue
import { FwbModal, FwbDropdown } from 'flowbite-vue'

// ✅ 推荐：按需导入
import { Modal } from 'flowbite-react'
 
// ❌ 避免：整体导入
import Flowbite from 'flowbite-react'