Install Preline UI with Qwik using Tailwind CSS

Install Preline UI with Tailwind CSS in Qwik projects, including JavaScript plugin setup, visible tasks, Qwik City navigation, and optional dependencies.

Installation

Please note that the plugin has been tested with the 1.12.1 version of the framework. The framework was installed using the standard npm create qwik@latest command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Qwik quick setup

If Tailwind CSS is not set up yet, start with the official Qwik + Tailwind CSS guide first.

Some components rely on third-party libraries. The setup below assumes full Preline UI usage with those dependencies preloaded. If you do not plan to use those components, you can remove the related libraries from your configuration.

Install Preline UI

Install preline with your preferred package manager.

Terminal

                          
                            npm install preline

Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

Include Preline CSS

Import Preline into projects_root_directory/src/global.css.

global.css

                          
                            @import "tailwindcss";

                            @import "preline/variants.css";
                            @source "../node_modules/preline/dist/*.js";

                            /* Optional Preline UI Datepicker Plugin */
                            /* @import "preline/src/plugins/datepicker/styles.css"; */

                            /* Plugins */
                            /* @plugin "@tailwindcss/forms"; */

                            /* Preline Themes */
                            @import "./themes/theme.css";

See the Theme docs to learn more about Preline Themes.

Add type definitions for Preline

Create a global.d.ts file for the shared window typings, for example projects_root_directory/global.d.ts.

global.d.ts

                          
                            import type { IStaticMethods } from "preline/dist";

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

                            export {};

Add Preline UI to the root layout

Import the required external libraries and Preline UI in projects_root_directory/src/root.tsx.
... // Optional plugins import jQuery from "../node_modules/jquery/dist/jquery.min.js?raw"; import Lodash from "../node_modules/lodash/lodash.min.js?raw"; import NoUiSlider from "../node_modules/nouislider/dist/nouislider.min.js?raw"; import DataTable from "../node_modules/datatables.net/js/dataTables.min.js?raw"; import Dropzone from "../node_modules/dropzone/dist/dropzone-min.js?raw"; import VanillaCalendarPro from "../node_modules/vanilla-calendar-pro/index.js?raw"; // Preline UI import PrelineUI from "../node_modules/preline/dist/index.js?raw"; export default component$(() => { ... return ( <QwikCityProvider> ... <body lang="en"> <RouterOutlet /> ...  <script dangerouslySetInnerHTML={jQuery} /> <script dangerouslySetInnerHTML={Lodash} /> <script dangerouslySetInnerHTML={NoUiSlider} /> <script dangerouslySetInnerHTML={DataTable} /> <script dangerouslySetInnerHTML={Dropzone} /> <script dangerouslySetInnerHTML={VanillaCalendarPro} />  <script dangerouslySetInnerHTML={PrelineUI} /> </body> </QwikCityProvider> ); });
root.tsx
```
                          
                        
```
Reinitialize on route changes

Re-run Preline UI initialization in projects_root_directory/src/routes/layout.tsx after route changes on the client.
import { component$, Slot, isServer, useTask$ } from "@builder.io/qwik"; import { useLocation } from "@builder.io/qwik-city"; ... export default component$(() => { const location = useLocation(); useTask$(async ({ track }) => { track(() => location.url); if (isServer) return; window.HSStaticMethods.autoInit(); }); return <> ... <Slot /> </>; });
layout.tsx
```
                          
                        
```

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer in Preline UI.

CSS

                        
                          /* Adds pointer cursor to buttons */
                          @layer base {
                            button:not(:disabled),
                            [role="button"]:not(:disabled) {
                              cursor: pointer;
                            }
                          }

                          /* Defaults hover styles on all devices */
                          @custom-variant hover (&:hover);