Install Preline UI with Remix 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. Install it if you have not already: npm install -D @tailwindcss/forms

2. Include Preline CSS

   Import Preline into projects_root_directory/app/tailwind.css.

   tailwind.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.

3. Add type definitions for Preline

   Create a global.d.ts file for the shared window typings, for example projects_root_directory/app/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;
                                   noUiSlider;
                                   VanillaCalendarPro;
   
                                   // Preline UI
                                   HSStaticMethods: IStaticMethods;
                                 }
                               }
   
                               export {};
                             
                           

4. Add Preline UI to the root layout

   Import the required external libraries and initialize Preline UI in projects_root_directory/app/root.tsx.

   root.tsx

                             
                               import { useEffect } from "react";
                               import {
                                 ...
                                 Outlet,
                                 useLocation,
                               } from "@remix-run/react";
                               ...
   
                               import "./tailwind.css";
   
                               // Optional third-party libraries
                               if (typeof window !== 'undefined') {
                                 Promise.all([
                                   import('jquery'),
                                   import('lodash'),
                                   import('nouislider'),
                                   import('datatables.net'),
                                   import('dropzone/dist/dropzone-min.js'),
                                   import('vanilla-calendar-pro')
                                 ]).then(([$, _, noUiSlider, , , VanillaCalendarPro]) => {
                                   window._ = _.default;
                                   window.$ = $.default;
                                   window.jQuery = $.default;
                                   window.DataTable = $.default.fn.dataTable;
                                   window.noUiSlider = noUiSlider.default;
                                   window.VanillaCalendarPro = VanillaCalendarPro;
                                 }).catch(error => {
                                   console.error('Failed to initialize dependencies:', error);
                                 });
                               }
   
                               ...
   
                               export function Layout({ children }: { children: React.ReactNode }) {
                                 const location = useLocation();
   
                                 // Preline UI
                                 useEffect(() => {
                                   let mounted = true;
                                   
                                   const initPreline = async () => {
                                     try {
                                       if (typeof window !== 'undefined' && mounted) {
                                         await import('preline/dist');
   
                                         if (window.HSStaticMethods && mounted) window.HSStaticMethods.autoInit();
                                       }
                                     } catch (error) {
                                       console.error('Failed to initialize Preline:', error);
                                     }
                                   };
   
                                   initPreline();
   
                                   return () => {
                                     mounted = false;
                                   };
                                 }, [location.pathname]);
   
                                 return (
                                   <html lang="en">
                                     <head>
                                       ...
                                     </head>
                                     <body>
                                       ...
                                       
                                       {children}
   
                                       ...
                                     </body>
                                   </html>
                                 );
                               }
   
                               export default function App() {
                                 return <Outlet />;
                               }
                             
                           

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.

Community workarounds

Explore community-shared fixes, examples, and integration tips for edge cases that come up while using Preline UI.