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/app.css, which is the CSS entry file's name in the current React Router v7 default template (older Remix v2 scaffolds used app/tailwind.css; rename the path below if you're on that structure).

   app.css

                             
                               @import "tailwindcss";
   
                               @import "preline/variants.css";
                               @source "../node_modules/preline/dist/*.js";
   
                               /* Optional Preline UI Datepicker Plugin */
                               /* @import "preline/datepicker-styles-utility.css"; */
   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "preline/theme.css";
   
                               /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                                 search/length/paging controls alongside Preline's own; hide the native
                                 ones since they can't be disabled through DataTables options alone. */
                               /*
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                               */
                             
                           

   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. Each optional property below belongs to one plugin: keep only the ones for plugins you actually install (see "Optional dependencies only matter for the plugins that use them" in the Remix usage guide), or the file won't compile against packages you haven't added yet.

   global.d.ts

                             
                               import type { HSStaticMethods } from "preline";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries, typed against
                                   // whichever of these packages you actually install
                                   _: typeof import("lodash");
                                   $: typeof import("jquery");
                                   jQuery: typeof import("jquery");
                                   DataTable: typeof import("datatables.net-dt")["default"];
                                   Dropzone: typeof import("dropzone")["default"];
                                   noUiSlider: typeof import("nouislider")["default"];
                                   VanillaCalendarPro: typeof import("vanilla-calendar-pro")["Calendar"];
   
                                   // Preline UI
                                   HSStaticMethods: typeof HSStaticMethods;
                                 }
                               }
   
                               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 "react-router";
                               ...
   
                               import "./app.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');
   
                                         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 />;
                               }
                             
                           

   @remix-run/react was Remix v2's routing package; it is not installed by the current create-react-router scaffold. Outlet, useLocation, and the rest of the routing API now come from the react-router package itself.

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.