Install Preline UI with React 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 a reinitialization helper

   Add code that reinitializes the components every time when app is mounted or page was changed projects_root_directory/src/App.tsx

                         
                           import { useEffect } from 'react';
                           import { useLocation } from 'react-router-dom';
   
                           import "preline/preline";
                           import { IStaticMethods } from "preline/preline";
                           declare global {
                             interface Window {
                               HSStaticMethods: IStaticMethods;
                             }
                           }
   
                           ...
   
                           function App() {
                             const location = useLocation();
   
                             useEffect(() => {
                               window.HSStaticMethods.autoInit();
                             }, [location.pathname]);
   
                             return (
                               ...
                             );
                           }
   
                           export default App;
                         
                       

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.