2. Frameworks
  3. Qwik

Installation

Install Preline UI with Qwik using Tailwind CSS

Setting up Preline UI in a Qwik project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the latest version of the framework (v1.2.19). 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.

Preline UI + Qwik

  1. Install Preline UI

    Install preline via npm or yarn. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    Add the path to Preline UI JavaScript files in your tailwind.config.js file. 

    // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',    ],  plugins: [      require('preline/plugin'),  ],}

  3. Add the Preline UI JavaScript

    Include Preline UI JavaScript to the projects_root_directory/src/root.tsx file. 

                          
                        import { component$ } from "@builder.io/qwik";
                        import {
                          QwikCityProvider,
                          ...
                        } from "@builder.io/qwik-city";
                        ...

                        export default component$(() => {
                          return (
                            <QwikCityProvider>
                              ...
                              <body lang="en">
                                ...
                                <script src="../assets/vendor/preline/preline.js"></script>
                              </body>
                            </QwikCityProvider>
                          );
                        });

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.

Alternative approach importing Preline UI to Qwik project.

Issue #295 by @LazyClicks