Installation
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!
Current framework guides are based on Tailwind v3.x and currently we are working on updating the guides for Tailwind v4.
Remix is a full stack React web framework.. If you haven't set up Tailwind CSS yet, check out Remix Tailwind CSS installation guides.
Install preline
via npm or yarn.
// Terminal or Shellnpm install preline // or yarn add preline
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'), ],}
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 {
...
useLocation,
} from "@remix-run/react";
...
import { type IStaticMethods } from "preline/preline";
declare global {
interface Window {
HSStaticMethods: IStaticMethods;
}
}
if (typeof window !== "undefined") {
require("preline/preline");
}
...
export default function App() {
const location = useLocation();
useEffect(() => {
window.HSStaticMethods.autoInit();
}, [location.pathname]);
return (
...
);
}
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.