#  FlyonUI

```
npm install tailwindcss @tailwindcss/vite flyonui @iconify/tailwind4 @iconify/json @iconify-json/tabler
```

vite.config.ts
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

```

src\style.css
```
@import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "../node_modules/flyonui/flyonui.js";
@plugin "@iconify/tailwind4";

/* Import Third-party override css */
/* @import "flyonui/src/vendor/flatpickr.css"; */
/* @import "flyonui/src/vendor/notyf.css"; */
/* @import "flyonui/src/vendor/datatables.css"; */
/* @import "flyonui/src/vendor/editor.css"; */
/* @import "flyonui/src/vendor/fullcalendar.css"; */
/* @import "flyonui/src/vendor/raty.css"; */
/* @import "flyonui/src/vendor/waves.css"; */
/* @import "flyonui/src/vendor/apexcharts.css"; */
```

src\main.ts
```
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "flyonui/flyonui"

createApp(App).mount('#app')

```

src\global.d.ts
```
import type { IStaticMethods } from "flyonui/flyonui";

declare global {
    interface Window {
        HSStaticMethods: IStaticMethods;
    }
}

export { };

```

src\App.vue
```
<script setup lang="ts">
import { onMounted } from 'vue';
  onMounted(() => {
    setTimeout(() => window.HSStaticMethods.autoInit(), 100)
  });
</script>
```

---
.vscode\settings.json
```
{
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "less.lint.unknownAtRules": "ignore"
}

```