Set up FlyonUI with Tailwind CSS Qwik Combine FlyonUI with Qwik and Tailwind CSS to build a sleek, responsive interface, optimizing your development workflow for greater efficiency.
Installation Please note that the plugin has been tested with the latest version of the framework (v1.12.1). The framework was installed using the standard `npm create qwik@latest`
command. If you are using your own project structure, be mindful of file paths!
Quick
Qwik
setup Qwik is an instant-loading framework with minimal overhead. If you haven't set up Tailwind CSS yet, check out
Qwik Tailwind CSS
installation guides.
This repository consists of two branches:
main: Contains the FlyonUI Starter Kit with Qwik, offering a clean and scalable foundation to kickstart your project.components: Showcases practical examples of FlyonUI component usage within a Qwik environment1
Install FlyonUI
Install
flyonui
via npm.
2
Add FlyonUI plugin
Include FlyonUI plugin in your global.css
file.
// global .css
@import "tailwindcss" ;
@plugin "flyonui" ;
@import "flyonui/variants.css" ;
@source "./node_modules/flyonui/flyonui" ;
/* 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"; */
Note: If you want to include specific js component
Tip : Using specific components helps minimize the size of the generated JavaScript and CSS.
// global .css
@source "./node_modules/flyonui/dist/accordion.js" // Specific JS component
3
Add type definitions for FlyonUI
Create the global.d.ts
file in the project root directory.
// global.d.ts
declare global {
interface Window {
// Optional third-party libraries
_ ;
$ : typeof import ("jquery" );
jQuery : typeof import ("jquery" );
DataTable ;
Dropzone ;
}
}
export {};
3
Add the FlyonUI JavaScript
Include FlyonUI JavaScript to the root_directory/src/root.tsx
file.
import { component$ } from "@builder.io/qwik" ;
import {
QwikCityProvider ,
...
} from "@builder.io/qwik-city" ;
// Optional third-party libraries
import $ from 'jquery' ;
import _ from 'lodash' ;
import noUiSlider from 'nouislider' ;
import 'datatables.net' ;
import 'dropzone/dist/dropzone-min.js' ;
window.$ = $ ;
window._ = _ ;
window.jQuery = $ ;
window.DataTable = $ .fn .dataTable ;
window.noUiSlider = noUiSlider ;
...
export default component$ (() => {
return (
<QwikCityProvider >
...
<body >
...
<script src = "../path/to/flyonui/flyonui.js" ></script >
</body >
</QwikCityProvider >
);
});
Note: If you want to include specific js component
...
<script src = "../path/to/flyonui/dist/accordion.js" ></script > // Add particular component JS
...
Icons For icons setup you can refer
Icons
page.