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!
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";
...
if (typeof window !== "undefined") {
require("preline/preline");
}
...
export default function App() {
const location = useLocation();
useEffect(() => {
HSStaticMethods.autoInit();
}, [location.pathname]);
return (
...
);
}