1. Getting Started
  2. Frameworks
  3. React

Installation

Install Preline UI with React using Tailwind CSS

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

Create React App has limitations in supporting custom PostCSS configurations, leading to incompatibility with several vital tools in the PostCSS ecosystem, such as postcss-import.

For a more flexible and controlled development experience, especially regarding Tailwind and PostCSS configurations, we suggest opting for alternatives like Next.js or Remix. These tools offer a similar or enhanced developer experience compared to Create React App, but with added flexibility.

Installation

Please note that the plugin has been tested with the latest version of the framework (v18.2.0). The framework was installed using the standard npx create-react-app@latest <project-name> --template typescript 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 React setup

A framework for building web user interfaces. If you haven't set up Tailwind CSS yet, check out React Tailwind CSS installation guides.

Preline UI + React
  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 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 { useEffect } from 'react';
                            import { useLocation } from 'react-router-dom';
    
                            import "preline/preline";
                            import { IStaticMethods } from "preline/preline";
                            declare global {
                              interface Window {
                                HSStaticMethods: IStaticMethods;
                              }
                            }
    
                            ...
    
                            function App() {
                              const location = useLocation();
    
                              useEffect(() => {
                                window.HSStaticMethods.autoInit();
                              }, [location.pathname]);
    
                              return (
                                ...
                              );
                            }
    
                            export default App;