Install Preline UI with Solid.js 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/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 "./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/src/global.d.ts.

   global.d.ts

                             
                               import type noUiSlider from "nouislider";
                               import type { IStaticMethods } from "preline/dist";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   _: typeof import("lodash");
                                   $: typeof import("jquery");
                                   jQuery: typeof import("jquery");
                                   DataTable: typeof $.fn.dataTable;
                                   Dropzone: typeof import("dropzone");
                                   noUiSlider: typeof noUiSlider;
                                   VanillaCalendarPro: typeof import("vanilla-calendar-pro");
   
                                   // Preline UI
                                   HSStaticMethods: IStaticMethods;
                                 }
                               }
   
                               export {};
                             
                           

4. Add Preline UI to the app entry

   Import and attach the required external libraries in projects_root_directory/src/index.tsx, then load Preline UI before rendering the app.

   index.tsx

                             
                               ...
   
                               // Optional third-party libraries
                               import $ from 'jquery';
                               import _ from 'lodash';
                               import noUiSlider from 'nouislider';
                               import 'datatables.net';
                               import 'dropzone/dist/dropzone-min.js';
                               import * as VanillaCalendarPro from 'vanilla-calendar-pro';
   
                               window._ = _;
                               window.$ = $;
                               window.jQuery = $;
                               window.DataTable = $.fn.dataTable;
                               window.noUiSlider = noUiSlider;
                               window.VanillaCalendarPro = VanillaCalendarPro;
   
                               const root = document.getElementById('root');
   
                               ...
   
                               // Preline UI
                               import("preline/dist").then(() => {
                                 render(() => <App />, root!);
                               });
                             
                           

5. Reinitialize on route changes

   Re-run Preline UI initialization when the app mounts or the route changes in projects_root_directory/src/App.tsx.

   App.tsx

                             
                               import { createSignal, createEffect } from 'solid-js';
                               import type { Component } from 'solid-js';
                               import { useLocation } from '@solidjs/router';
   
                               ...
   
                               const App: Component = () => {
                                 const location = useLocation();
                                 const [_, setLoc] = createSignal(location.pathname);
   
                                 createEffect(() => {
                                   setLoc(location.pathname);
   
                                   window.HSStaticMethods.autoInit();
                                 });
   
                                 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.