Installation
Quickly set up Preline UI Tailwind CSS library for your project. Browse Tailwind components and UI elements such as buttons, grids, tables, and more.
This guide will help you get started with Preline UI, including how to run, customize, update, and integrate your project!
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.
Install preline
via npm
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
Import the Preline UI CSS Variants file variants.css
into your Tailwind CSS file, ensuring it comes after the tailwindcss
import.
Include the JavaScript <script>
that powers the interactive elements near the end of your </body>
tag:
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.
Preline UI comes with some framework-specific guides to help you get started with the library. Check out Framework Guides
It's an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Based on the Tailwind CSS utility classes, Preline UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites with diverse predefined components (such as modals, buttons, alerts, cards and more).
Components are grouped by visual usability criteria (components, navigation, forms, etc.) and styled directly on top of Tailwind CSS, making them easy to extend and customize. This is a lifesaver for developers looking to create a unique and eye-catching design system without the hassle of creating each component by hand.