Install Preline UI with Remix using Tailwind CSS

1. Install Preline UI

   Install preline via npm or yarn.

   // Terminal or Shellnpm install preline // or yarn add preline

2. Configure Preline UI JavaScript paths

   Add the path to Preline UI JavaScript files in your tailwind.config.js file.

   // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',  ],  plugins: [      require('preline/plugin'),  ],}

3. Add the Preline UI JavaScript loader

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

                         
                           import type { LinksFunction } from "@remix-run/node";
                           import { useEffect } from "react";
                           import {
                             ...
                             useLocation,
                           } from "@remix-run/react";
   
                           ...
   
                           import { type IStaticMethods } from "preline/preline";
                           declare global {
                             interface Window {
                               HSStaticMethods: IStaticMethods;
                             }
                           }
                           if (typeof window !== "undefined") {
                             require("preline/preline");
                           }
   
                           ...
   
                           export default function App() {
                             const location = useLocation();
   
                             useEffect(() => {
                               window.HSStaticMethods.autoInit();
                             }, [location.pathname]);
   
                             return (
                               ...
                             );
                           }
                         
                       

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.