Documentation

This page will help you get started with Preline Pro, including how to run, and integrate your project.

Quick setup

First, you need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

Then you need to install Preline UI.

Require via NPM

  1. Install Preline UI

    Install preline via npm 

                      
                    npm i preline

    Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

  2. Add the Preline UI CSS Variants

    Import the Preline UI CSS Variants file variants.css into your Tailwind CSS file, ensuring it comes after the tailwindcss import. 

                      
                    @import 'tailwindcss';
                    
                    /* Preline UI */
                    @import './node_modules/preline/variants.css';

                    /* Plugins */
                    /* @plugin "@tailwindcss/forms"; */

  3. Add the Preline UI JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag: 

                      
<script src="./node_modules/preline/dist/preline.js"></script>

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them in Preline UI. 

              
                /* Adds pointer cursor to buttons */
                @layer base {
                  button:not(:disabled),
                  [role="button"]:not(:disabled) {
                    cursor: pointer;
                  }
                }

                /* Defaults hover styles on all devices */
                @custom-variant hover (&:hover);

For those unfamiliar with Preline UI, it's advisable to explore the Preline UI documentation to maximize your understanding and utilization of the framework.

Subscribe

Get all the latest Preline updates and news.