Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Install Preline UI with Nuxt.js using Tailwind CSS

Install Preline UI with Tailwind CSS in Nuxt.js projects, including JavaScript plugin setup, client plugins, route hooks, and optional dependencies.

Installation

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

Quick Nuxt.js setup

The Intuitive Web Framework. If you haven't set up Tailwind CSS yet, check out Nuxt.js Tailwind CSS installation guides.

Preline UI + Nuxt.js

Some components require third-party libraries. The settings below assume full use of Preline UI, including preloaded dependencies. If you do not intend to use those components that rely on third-party libraries, you may exclude them from your configuration.

  1. Install Preline UI

    Install Preline using your preferred package manager.

    Terminal 
                              
                            npm install preline

    Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

  2. Include Preline CSS

    Include Preline in your projects_root_directory/assets/css/main.css file.

    main.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";

    Check out the Theme docs to learn more about Preline Themes.

  3. Add type definitions for Preline

    Create the global.d.ts file in the project root directory, e.g. projects_root_directory/types/global.d.ts

    global.d.ts 
                              
                            import type { IStaticMethods } from "preline/dist";

                            declare global {
                              interface Window {
                                // Optional third-party libraries
                                _;
                                $: typeof import("jquery");
                                jQuery: typeof import("jquery");
                                DataTable;
                                Dropzone;
                                VanillaCalendarPro;

                                // Preline UI
                                HSStaticMethods: IStaticMethods;
                              }
                            }

                            export {};

  4. Add the Preline UI JavaScript

    Add the Preline UI JavaScript in your app entry point projects_root_directory/plugins/preline.client.ts

    preline.client.ts 
                              
                            import { useRouter } from "vue-router";

                            // Optional third-party libraries
                            import $ from "jquery";
                            import _ from "lodash";
                            import noUiSlider from "nouislider";
                            import "datatables.net";
                            import "dropzone/dist/dropzone-min.js";
                            import * as VanillaCalendarPro from "vanilla-calendar-pro";

                            window._ = _;
                            window.$ = $;
                            window.jQuery = $;
                            window.DataTable = $.fn.dataTable;
                            window.noUiSlider = noUiSlider;
                            window.VanillaCalendarPro = VanillaCalendarPro;

                            // Preline UI
                            import("preline/dist");

                            export default defineNuxtPlugin(() => {
                              const router = useRouter();

                              router.afterEach(async () => {
                                setTimeout(() => window.HSStaticMethods.autoInit());
                              });
                            });

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them 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);

© 2026 Preline Labs.