Install Preline UI with Next.js using Tailwind CSS

1. 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. If you have not added it yet, install it with npm install -D @tailwindcss/forms.

2. Include Preline CSS

   Import Preline into your global.css file, for example project_root_directory/app/globals.css.

   global.css

                             
                               @import "tailwindcss";
   
                               /* Preline UI */
                               @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 "preline/css/themes/theme.css";
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Add type definitions for Preline

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

   global.d.ts

                             
                               import type { JQueryStatic } from "jquery";
                               import type _ from "lodash";
                               import type Dropzone from "dropzone";
                               import type noUiSlider from "nouislider";
                               import type DataTables from "datatables.net";
                               import type { Calendar } from "vanilla-calendar-pro";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   $: JQueryStatic
                                   jQuery: JQueryStatic
                                   _: typeof _
                                   Dropzone: typeof Dropzone
                                   noUiSlider: typeof noUiSlider
                                   DataTable: typeof DataTables
                                   VanillaCalendarPro: typeof Calendar
   
                                   // Preline UI
                                   HSStaticMethods: {
                                     autoInit: (collection?: string[]) => void
                                   }
                                 }
                               };
   
                               export {};
                             
                           

4. Create Preline UI JavaScript loader

   Create a client-side Preline UI loader component inside project_root_directory/app/components/PrelineScript.tsx.

   PrelineScript.tsx

                             
                               "use client";
   
                               import { usePathname } from "next/navigation";
                               import { useEffect } from "react";
   
                               // Optional third-party libraries
                               import $ from "jquery";
                               import _ from "lodash";
                               import Dropzone from "dropzone";
                               import noUiSlider from "nouislider";
                               import DataTable from "datatables.net";
                               import { Calendar } from "vanilla-calendar-pro";
   
                               window.$ = $;
                               window.jQuery = $;
                               window._ = _;
                               window.Dropzone = Dropzone;
                               window.noUiSlider = noUiSlider;
                               window.DataTable = DataTable;
                               window.VanillaCalendarPro = Calendar;
   
                               // Preline UI
                               export default function PrelineScript() {
                                 const path = usePathname();
   
                                 useEffect(() => {
                                   import("preline").then(() => {
                                     window.HSStaticMethods.autoInit();
                                   });
                                 }, [path]);
   
                                 return null;
                               }
                             
                           

   Then add a wrapper component in project_root_directory/app/components/PrelineScriptWrapper.tsx so the loader stays client-only.

   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 loader to your app entry point, for example project_root_directory/app/layout.tsx.

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

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.