Getting Started

This project uses **Tailwind CSS v4.1.13** with extensive customization 

Tailwind is configured to scan the following paths for class usage:
```javascript
content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}",
  "node_modules/flowbite/**/*.js"
]

Plugins:

The following Tailwind plugins are integrated:
- **@tailwindcss/forms** - Better default styles for form elements
- **@tailwindcss/typography** - Beautiful typographic defaults
- **flowbite/plugin** - Flowbite component styles and utilities

Overview

Flowbite v3.1.2** and **Flowbite Vue v0.2.2** are integrated to provide pre-built, accessible UI components.

Configuration

1. Tailwind Config
Flowbite content paths and plugin are included in `tailwind.config.js`:
```javascript
content: [
  "./src/**/*.{js,jsx,ts,tsx}",
"node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}",
"node_modules/flowbite/**/*.js",
],
plugins: [
  require('flowbite/plugin')
]
```

 2. Vite Config
Flowbite is optimized for Vite bundling in `vite.config.ts`:
```javascript
optimizeDeps: {
  include: ['flowbite']
}
```

3. CSS Imports
Flowbite styles are imported in `src/main.js`:
```javascript
import 'flowbite';
import "flowbite/dist/flowbite.css";
```

Flowbite Initialization System

FlowbiteProvider
A custom provider (`src/app.vue`) ensures Flowbite components are initialized:
- Initializes on component mount
- Re-initializes on route changes
- Handles dynamic content rendering


import { initFlowbite } from "flowbite";

```
#### FlowbiteInitializer
Global initializer in `src/app.vue` that:
- Runs on app startup
- Performs multiple initialization passes to ensure all components are ready
- Handles timing issues with dynamic content

onMounted(() => {
  initFlowbite();

  document.querySelectorAll(".dropdown-toggle").forEach((dropdownToggle) => {
    dropdownToggle.addEventListener("click", function (e) {
      e.preventDefault();
      const dropdownMenu = this.nextElementSibling;
      dropdownMenu.classList.toggle("hidden");
    });
  });
});

**Features**:
- `initializeFlowbite()`: Initialize Flowbite components
- `reinitializeFlowbite()`: Reinitialize with delay for DOM updates
- `useDataTableFlowbite()`: Specialized hook for data tables with dynamic content

### Flowbite Components Used
The project extensively uses Flowbite components including:
- **Modals**: Dynamic modals in data tables and forms
- **Dropdowns**: Navigation and action menus
- **Tooltips**: Contextual help
- **Offcanvas**: Side panels and drawers
- **Tabs**: Content organization
- **Accordions**: Collapsible content sections

### Usage Example
```javascript
// Using Flowbite modal with dynamic initialization
import { initFlowbite } from "flowbite";

const MyComponent = () => {
  onMounted(() => {
      initFlowbite();
    });
}