2. Frameworks
  3. SolidJS

Installation

Install Preline UI with Solid.js using Tailwind CSS

Setting up Preline UI in a Solid.js project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the latest version of the framework (v1.8.5). The framework was installed using the standard npm create vite@latest <project-name> -- --template solid command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Important Note

Current framework guides are based on Tailwind v3.x and currently we are working on updating the guides for Tailwind v4.

Quick Solid.js setup

Simple and performant reactivity for building user interfaces. If you haven't set up Tailwind CSS yet, check out Solid.js Tailwind CSS installation guides.

Preline UI + Solid.js

  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 the Preline UI JavaScript

    Add the Preline UI JavaScript in your app entry point projects_root_directory/src/index.tsx 

                          
                        import { render } from "solid-js/web";
                        import { Router } from "@solidjs/router";

                        ...
                        import "preline/preline";
                        import App from "./App";

                        const root = document.getElementById("root");

                        render(
                          () => (
                            <Router>
                              <App />
                            </Router>
                          ),
                          root!
                        );

  4. 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 { useLocation } from "@solidjs/router";

                        import { IStaticMethods } from "preline/preline";
                        declare global {
                          interface Window {
                            HSStaticMethods: IStaticMethods;
                          }
                        }

                        ...

                        const App = () => {
                          const location = useLocation();
                          const [_, setLoc] = createSignal(location.pathname);

                          createEffect(() => {
                            setLoc(location.pathname);

                            window.HSStaticMethods.autoInit();
                          });

                          return (
                            ...
                          );
                        };

                        export default App;