Documentation

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 plugin

   Include Preline UI as a plugin in the tailwind.config.js file.

   // tailwind.config.jsmodule.exports = {  content: [    // './src/**/*.{html,js}',      'node_modules/preline/dist/*.js',  ],  plugins: [    // require('@tailwindcss/forms'),      require('preline/plugin'),  ],}

3. Add the Preline UI JavaScript

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

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

4. Install the third-party plugins

   Certain Examples in Preline Pro make use of third-party plugins such as Charts, Datamaps, WYSIWYG Editor, and Clipboard.

   Ensure you install these plugins if you intend to utilize them; otherwise, you can skip this step if none of them are needed.

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