1. Frameworks
  2. Remix


Install Preline UI with Remix using Tailwind CSS

Setting up Preline UI in a Remix project using Tailwind CSS.


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

Quick Remix setup

Remix is a full stack React web framework.. If you haven't set up Tailwind CSS yet, check out Remix Tailwind CSS installation guides.

Preline UI + Remix
  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 loader

    Add the Preline UI JavaScript loader to your app entry point, e.g. projects_root_directory/app/root.tsx

                            import type { LinksFunction } from "@remix-run/node";
                            import { useEffect } from "react";
                            import {
                            } from "@remix-run/react";
                            import { type IStaticMethods } from "preline/preline";
                            declare global {
                              interface Window {
                                HSStaticMethods: IStaticMethods;
                            if (typeof window !== "undefined") {
                            export default function App() {
                              const location = useLocation();
                              useEffect(() => {
                              }, [location.pathname]);
                              return (

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.