Install Preline UI with React + Vite 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 index.css file, for example project_root_directory/src/index.css.

   index.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 "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/src/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 {
                                   $: JQueryStatic
                                   jQuery: JQueryStatic
                                   _: typeof _
                                   Dropzone: typeof Dropzone
                                   noUiSlider: typeof noUiSlider
                                   DataTable: typeof DataTables
                                   VanillaCalendarPro: typeof Calendar
                                   HSStaticMethods: {
                                     autoInit: (collection?: string[]) => void
                                   }
                                 }
                               };
   
                               export {};
                             
                           

4. Add external libraries

   Import and attach the required external libraries in project_root_directory/src/main.tsx.

   main.tsx

                             
                               ...
   
                               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;
   
                               ...
   
                               import("preline").then(() => {
                                 createRoot(document.getElementById("root")!).render(
                                   ...
                                 );
                               });
                             
                           

5. Initialize Preline UI

   Re-run Preline UI initialization after route changes in your app entry flow, for example in project_root_directory/src/App.tsx.

   App.tsx

                             
                               import { useEffect } from 'react';
                               import { useLocation } from 'react-router-dom';
   
                               ...
   
                               function App() {
                                 const location = useLocation();
   
                                 useEffect(() => {
                                   window.HSStaticMethods.autoInit();
                                 }, [location.pathname]);
   
                                 return (
                                   ...
                                 )
                               }
   
                               export default App
                             
                           

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.