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.

Install Preline UI

Install preline with your preferred package manager in your Django 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

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

														/* Preline UI */
														@import "../../../node_modules/preline/variants.css";

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

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

														@source "../../../**/*.{html,py,js}";

See the Theme docs to learn more about Preline Themes.

Configure static files and copy Preline JavaScript

Add the static files directory to Django settings, then copy the Preline JavaScript file into your project's static assets.

settings.py

													
														STATICFILES_DIRS = [
															BASE_DIR / "static",
														]

Terminal

													
														mkdir -p static/js
														cp node_modules/preline/dist/preline.js static/js/

Load Preline UI in Django templates

Include the copied Preline JavaScript file and its initialization script in your base Django template.
 <script src="{% static 'js/preline.js' %}"></script> <script> // Initialize Preline components document.addEventListener('DOMContentLoaded', function() { if (window.HSStaticMethods) { window.HSStaticMethods.autoInit(); } }); </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);

Django quick setup