Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Install Preline UI with Django using Tailwind CSS

Install Preline UI with Tailwind CSS in Django projects, including JavaScript plugin setup, Tailwind CSS configuration, templates, and optional dependencies.

Prerequisites

This guide assumes you already have a Django project with django-tailwind configured. If you haven't set up django-tailwind yet, check out the django-tailwind documentation first.

Django quick setup

Start with a Django project that already has django-tailwind configured, then add Preline UI to your Tailwind source, static files, and base template.

  1. Install Preline UI

    Install preline with your preferred package manager inside theme/static_src/, since that's where django-tailwind put its own package.json, and where the Tailwind CSS build in the next step expects to find it.

    Terminal 
    													
														cd theme/static_src
														npm install preline

    Preline UI uses the Tailwind CSS Forms plugin across form components. Install it the same way if you have not already: npm install -D @tailwindcss/forms

  2. Update Tailwind source CSS

    Add the Preline UI CSS variants, theme import, and source paths to theme/static_src/src/styles.css.

    theme/static_src/src/styles.css 
    													
														@import "tailwindcss";

														@import "../node_modules/preline/variants.css";
														@source "../node_modules/preline/dist/*.js";
                            @source "../../../**/*.{html,py,js}";

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

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

														/* Preline Themes */
														@import "../node_modules/preline/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;
                            }
                            */

    See the Theme docs to learn more about Preline Themes.

    node_modules is resolved relative to theme/static_src/, where npm install preline was run in step 1, one level up from theme/static_src/src/styles.css. The @source path scanning your templates stays three levels up, back at the Django project root.

    The main preline package also exports Advanced Datepicker styles as preline/datepicker-styles.css and preline/datepicker-styles-utility.css. Use the utility export shown above when the calendar needs Tailwind utility classes; install @preline/datepicker only when you intentionally want the standalone plugin package.

  3. Copy Preline JavaScript into the theme app's static files

    Copy the Preline JavaScript file into the theme app's own static folder, alongside the compiled CSS from the previous step. theme is already a registered Django app, so its static/ folder is picked up automatically by django.contrib.staticfiles.finders.AppDirectoriesFinder (on by default), so no separate STATICFILES_DIRS entry is needed. node_modules resolves the same way as in the previous step: relative to theme/static_src/, not the Django project root.

    Terminal 
    													
														cd theme/static_src
														mkdir -p ../static/js
														cp node_modules/preline/dist/preline.js ../static/js/

  4. Load Preline UI in Django templates

    Include the copied Preline JavaScript file in your base Django template, near the end of <body>. The bundle exposes window.HSStaticMethods and runs autoInit for you once the page loads, so a plain Django page (full page reloads, no htmx) needs no extra initialization 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);

© 2026 Preline Labs.