Install Preline UI with Solid.js using Tailwind CSS

1. Install Preline UI

   Install Preline using your preferred package manager.

   npm install preline

   Copy

   Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

2. Include Preline CSS

   Include Preline in your index.css file, e.g. projects_root_directory/src/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"; */

   Copy

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. projects_root_directory/src/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 {};

   Copy

4. Add the Preline UI JavaScript

   Add the Preline UI JavaScript in your app entry point projects_root_directory/src/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!);
   });

   Copy

5. 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 { 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;

   Copy

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);