Install Preline UI with Solid.js using Tailwind CSS

1. Install Preline UI

   Install Preline UI. Dependencies declared by the package, including Floating UI and the vendor libraries bundled plugins use, are installed transitively. Datatable and Datepicker also need the direct integrations listed in the SolidJS guide.

   Terminal

                             
                               npm install preline
   
                               # Required by the current Preline 5.0.0 declaration bundle
                               npm install -D @types/dropzone
                             
                           

   Add the Tailwind CSS Forms plugin when the Preline components you use contain form controls: npm install -D @tailwindcss/forms

2. Include Preline CSS

   Import Tailwind CSS and Preline UI into projects_root_directory/src/styles/global.css, then import that stylesheet from your app layout or entry component.

   src/styles/global.css

                             
                               @import "tailwindcss";
   
                               @import "preline/variants.css";
                               @source "../../node_modules/preline/dist/*.js";
   
                               /* Optional Preline UI Datepicker Plugin */
                               /* @import "preline/datepicker-styles-utility.css"; */
   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "preline/theme.css";
   
                               /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                                 search/length/paging controls alongside Preline's own; hide the native
                                 ones since they can't be disabled through DataTables options alone. */
                               /*
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                               */
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Create a cached Preline initializer

   Use preline/non-auto for lifecycle-controlled initialization. Cache the browser-only import, then rescan the DOM whenever Solid renders new Preline markup.

   src/scripts/preline.ts

                             
                               type HSStaticMethods = typeof import("preline/non-auto").HSStaticMethods;
   
                               let hsStaticMethods: HSStaticMethods | undefined;
                               let setupPromise: Promise<HSStaticMethods> | undefined;
   
                               async function setupPreline(): Promise<HSStaticMethods> {
                                 return (await import("preline/non-auto")).HSStaticMethods;
                               }
   
                               async function initPreline(): Promise<void> {
                                 if (hsStaticMethods) {
                                   hsStaticMethods.autoInit();
                                   return;
                                 }
   
                                 setupPromise ??= setupPreline();
                                 hsStaticMethods = await setupPromise;
                                 hsStaticMethods.autoInit();
                               }
   
                               export default initPreline;
                             
                           

4. Initialize after Solid mounts

   Call the initializer from onMount after Solid has committed the Preline markup to the DOM. This is the correct lifecycle for browser-only libraries.

   src/layouts/Layout.tsx

                             
                               import { onMount, type ParentComponent } from "solid-js";
                               import initPreline from "../scripts/preline";
                               import "../styles/global.css";
   
                               const Layout: ParentComponent = (props) => {
                                 onMount(() => {
                                   void initPreline().catch((error: unknown) => {
                                     console.error("[preline] failed to initialize components", error);
                                   });
                                 });
   
                                 return <main>{props.children}</main>;
                               };
   
                               export default Layout;
                             
                           

5. Resolve the current Preline TypeScript subpath

   Preline UI 5.0.0 declarations reference a Vanilla Calendar type file through a subpath that the vendor package does not export. Add this narrow mapping when TypeScript reports that vanilla-calendar-pro/types cannot be resolved.

   tsconfig.json

                             
                               {
                                 "compilerOptions": {
                                   "paths": {
                                     "vanilla-calendar-pro/types": ["./node_modules/vanilla-calendar-pro/types.d.ts"]
                                   }
                                 }
                               }
                             
                           

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.