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.
Please note that this guide has been tested with Flask 3.1.3. Flask has no official project-scaffolding CLI, so the project was set up by following Flask's own quickstart directly: pip install flask, with a minimal app.py defining Flask(__name__) and a single route.
If you are using your own project structure, a third-party starter template, or a different Flask version, pay attention to the file paths and features of your version!

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, then copy the default theme into your project so a future npm update does not silently change it.

Terminal

                          
                            mkdir -p static/css/themes
                            cp node_modules/preline/theme.css static/css/themes/theme.css

static/css/input.css

                          
                            @import "tailwindcss";

                            @import "../../node_modules/preline/variants.css";
                            @source "../../node_modules/preline/dist/*.js";

                            /* Optional Preline UI Datepicker Plugin */
                            /* @import "../../node_modules/preline/datepicker-styles-utility.css"; */

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

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

                            /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                              search/length/paging controls alongside Preline's own; hide the native
                              ones since they can't be disabled through DataTables options alone. */
                            /*
                            .dt-layout-row:has(.dt-search),
                            .dt-layout-row:has(.dt-length),
                            .dt-layout-row:has(.dt-paging) {
                              display: none !important;
                            }
                            */

Don't modify static/css/themes/theme.css directly. To customize colors, duplicate it (for example my-theme.css) and import your copy after the base theme. See the Theme docs for premade themes and customization.

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

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.

Flask

Using Preline UI with Flask

Use Preline UI JavaScript plugins in Flask projects, including serving Preline from static files, the Vite build path, the htmx re-init hook, Jinja2 templates, cleanup, and optional dependencies.

View guide

Flask quick setup