By following this guide you will learn how to create a new Qwik project, install and configure Tailwind CSS and proceed by installing Flowbite to start leveraging the open-source UI components to build interactive and instant-loading websites faster.
Before getting started make sure that you have Node.js v16.8 or higher available on your local machine and we also recommend to install the Qwik VS Code Extension to enable Qwik snippets.
- Create a new project by running the following command in your terminal:
npm create qwik@latestThe custom CLI (command line interface) from Qwik will prompt you with some questions on how you want your project to be configured - follow the steps until you have a fully working directory.
- Start a local development server by running:
npm run startYou should now be able to access a boilerplate Qwik project on http://localhost:5173/ from your local browser and start developing with the framework.
Tailwind CSS is a popular utility-first CSS framework that allows you to quickly build website user interfaces by directly writing the CSS and styles in your HTML templates via the rich collection of utility classes.
The easiest way to set up Tailwind CSS within your Qwik project is to run a starter script command:
npm run qwik add tailwindThis command will automatically set up the following:
- install Tailwind CSS and its dependencies
- modify the
src/global.cssfile to import the Tailwind module
By restarting the sever you will now be able to use the utility-first classes from Tailwind CSS.
Flowbite is a popular open-source UI component library that is built on top of the Tailwind CSS framework leveraging the utility-first class approach with custom interactive JavaScript that allows you to use and customize a collection of components like dropdowns, navbars, modals, and more.
Follow the next steps to install and set up Flowbite in your Qwik project:
- Install Flowbite as a dependency using NPM by running the following command:
npm install flowbite --save- Import the default theme variables from Flowbite inside your main
global.cssCSS file:
@import "flowbite/src/themes/default";- Import the Flowbite plugin file in your CSS:
@plugin "flowbite/plugin";- Configure the source files of Flowbite in your CSS:
@source "../node_modules/flowbite";- Finally, in the
src/root.tsxfile import the Flowbite JavaScript file inside your Qwik project to start using interactive components that require JavaScript such as the navbars, dropdowns, drawers, and more:
import { component$, useVisibleTask$ } from "@builder.io/qwik";
import {
QwikCityProvider,
RouterOutlet,
ServiceWorkerRegister,
} from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
import { isDev } from "@builder.io/qwik";
// import the Flowbite module
import { initFlowbite } from "flowbite";
import "./global.css";
export default component$(() => {
/**
* The root of a QwikCity site always start with the <QwikCityProvider> component,
* immediately followed by the document's <head> and <body>.
*
* Don't remove the `<head>` and `<body>` elements.
*/
// initialise the event listeners for the data attributes on render
useVisibleTask$(() => {
initFlowbite();
});
return (
<QwikCityProvider>
<head>
<meta charset="utf-8" />
{!isDev && (
<link
rel="manifest"
href={`${import.meta.env.BASE_URL}manifest.json`}
/>
)}
<RouterHead />
</head>
<body lang="en">
<RouterOutlet />
{!isDev && <ServiceWorkerRegister />}
</body>
</QwikCityProvider>
);
});Congratulations! Now you can start using all of the UI components from the Flowbite Library inside your Qwik project together with Tailwind CSS and build websites and user interfaces even faster.
By installing and configuring Flowbite in your Qwik project you can now directly copy and paste any UI component from the library and the blocks collection into your view files.