Install Preline UI with Django using Tailwind CSS

Setting up Preline UI in a Django project using Tailwind CSS.

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.

Quick Django setup

Integrate Preline UI components with your existing Django + django-tailwind project. This guide focuses on adding Preline UI to an already configured Django project.

Install Preline UI

Install preline via npm or yarn in your Django project directory.
Terminal
```
						
							npm install preline
						
					
```
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

Update Tailwind CSS Configuration

Add Preline UI CSS variants and forms plugin to your theme/static_src/src/styles.css file.

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

Check out the Theme docs to learn more about Preline Themes.

Configure Django Static Files and Copy Preline JavaScript

Add static files configuration to Django settings and copy Preline JavaScript to your static directory.

settings.py

						
              STATICFILES_DIRS = [
                BASE_DIR / "static",
              ]

Terminal

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

Add Preline JavaScript to Django Templates

Include Preline JavaScript and initialization script in your Django base 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

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.

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

Install Preline UI with Django using Tailwind CSS

Prerequisites

Quick Django setup