Install Preline UI with Next.js using Tailwind CSS

1. Install Preline UI

   Install Preline using your preferred package manager.

                       
                         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 global.css file, e.g. projects_root_directory/src/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"; */
                       
                     

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. projects_root_directory/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. Create Preline UI JavaScript loader

   Create the Preline UI JavaScript loader inside the project: projects_root_directory/app/components/PrelineScript.tsx

                       
                         'use client';
   
                         import { usePathname } from 'next/navigation';
                         import { useEffect } from 'react';
   
                         // 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
                         async function loadPreline() {
                           return import('preline/dist/index.js');
                         }
   
                         export default function PrelineScript() {
                           const path = usePathname();
   
                           useEffect(() => {
                             const initPreline = async () => {
                               await loadPreline();
                             };
   
                             initPreline();
                           }, []);
   
                           useEffect(() => {
                             setTimeout(() => {
                               if (
                                 window.HSStaticMethods &&
                                 typeof window.HSStaticMethods.autoInit === 'function'
                               ) {
                                 window.HSStaticMethods.autoInit();
                               }
                             }, 100);
                           }, [path]);
   
                           return null;
                         }
                       
                     

   projects_root_directory/app/components/PrelineScriptWrapper.tsx

                       
                         'use client';
   
                         import dynamic from 'next/dynamic';
   
                         const PrelineScript = dynamic(() => import('./PrelineScript'), {
                           ssr: false,
                         });
   
                         export default function PrelineScriptWrapper() {
                           return <PrelineScript />;
                         }
                       
                     

5. Add the Preline UI JavaScript loader

   Add the Preline UI JavaScript loader to your app entry point, e.g. projects_root_directory/app/layout.tsx.

                         
                           ...
                           
                           import PrelineScriptWrapper from './components/PrelineScriptWrapper';
                           
                           ...
                           
                           export default function RootLayout({
                             children,
                           }: Readonly<{
                             children: React.ReactNode;
                           }>) {
                             return (
                               <html>
                                 ...
   
                                 <PrelineScriptWrapper />
                               </html>
                             );
                           }
                         
                       

Optional Preline UI Styles

                  
                    /* 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);
                  
                

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.