Install Preline UI with Flask using Tailwind CSS

Install Preline UI with Tailwind CSS in Flask projects, including JavaScript plugin setup, template scripts, app styles, and optional dependencies.

Prerequisites

This guide assumes you already have a Flask project with Tailwind CSS configured. If you haven't set up Tailwind CSS yet, check out the Tailwind CSS installation guides first.

Flask quick setup

Start with a Flask app that already has Tailwind CSS configured, then add Preline UI to your static assets and base template.

Install Preline UI

Install preline with your preferred package manager in your Flask project directory.
Terminal
```
                          
                            npm install preline
                          
                        
```
Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

Import Preline CSS variants

Import variants.css into static/css/input.css after the tailwindcss import.

static/css/input.css

                          
                            @import "tailwindcss";
                
                            /* Preline UI */
                            @import "../../node_modules/preline/variants.css";
                
                            /* Plugins */
                            /* @plugin "@tailwindcss/forms"; */

                            /* Preline Themes */
                            @import "./themes/theme.css";

See the Theme docs to learn more about Preline Themes.

Load Preline UI in Flask templates

Copy the Preline JavaScript file into your static directory, then include it in your base Flask template.
Terminal
```
                          
                            cp node_modules/preline/dist/preline.js static/js/
                          
                        
```
templates/base.html
 <script src="{{ url_for('static', filename='js/preline.js') }}"></script>
```
                          
                        
```

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer in Preline UI.

CSS

                        
                          /* 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);

Flask quick setup

Install Preline UI

Import Preline CSS variants

Load Preline UI in Flask templates

Optional Preline UI styles