Metronic - Tailwind CSS Django

Download

To set up the Metronic Tailwind CSS integration in Django, you can download the Metronic Integration Examples from our GitHub repository . These examples provide a quick way to integrate the Metronic styles into your Django project. This will give you a working starting point that you can customize to fit your needs.

Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.

Clone Integration Repository

Clone the Metronic integration repository to get the Django example:

				
					git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-django

Copy Assets Folder

Copy the


            assets

folder from the


            metronic-tailwind-html/dist

directory into your Django project


            static/

directory. The resulting directory structure should look like this:


            static/assets/

Setup Virtual Environment

Create a virtual environment and install the required dependencies:

				
					# Create virtual environment
python -m venv venv

# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

Run Database Migrations

Set up the database and run initial migrations:

				
					# Run database migrations
python manage.py migrate

# Create a superuser (optional)
python manage.py createsuperuser

# Collect static files
python manage.py collectstatic --noinput

Start Development Server

Launch your Django application:

				
					# Start the development server
python manage.py runserver

# Or specify host and port
python manage.py runserver 0.0.0.0:8000

Open your browser and navigate to


            http://127.0.0.1:8000

to see your Django app in action. You can explore both demo layouts:

				
					# Demo 1 - Sidebar Layout
http://127.0.0.1:8000/demo1/

# Demo 2 - Header Layout
http://127.0.0.1:8000/demo2/

# Admin Interface
http://127.0.0.1:8000/admin/

If you prefer to create a project from scratch, follow the manual setup steps in the next section.

Create Django Project

This guide walks you through creating a new Django project from scratch and setting up the foundation for integrating Metronic Tailwind CSS. We'll use Django 5.1+ with best practices including split settings, apps directory organization, and proper static file handling.

This guide assumes you have Python 3.10+ installed. For a ready-to-use Django project, you can download our pre-configured example from the Download section.

Prerequisites & Environment Setup

Ensure you have the required tools and create a virtual environment:

				
					# Check Python version (3.10+ required)
python --version

# Create project directory
mkdir my-metronic-django
cd my-metronic-django

# Create virtual environment
python -m venv venv

# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
venv\Scripts\activate

# Upgrade pip
pip install --upgrade pip

Install Django & Dependencies

Install Django 5.1+ and essential packages for Metronic integration:

				
					# Install core dependencies
pip install Django>=5.1.0
pip install whitenoise  # For static file serving
pip install pytest-django  # For testing

# Create requirements.txt
pip freeze > requirements.txt

Create Django Project Structure

Create the Django project:

				
					# Create Django project
django-admin startproject metronic_project .

# Create apps directory for better organization
mkdir apps
touch apps/__init__.py

# Create directory structure
mkdir -p templates/partials
mkdir -p static/{src,dist,public}
mkdir -p tests

Configure Split Settings

Set up split settings for better configuration management:

				
					# Create settings directory
mkdir metronic_project/settings
touch metronic_project/settings/__init__.py

# Move and split settings
mv metronic_project/settings.py metronic_project/settings/base.py

Create


            metronic_project/settings/__init__.py

				
					import os

# Default to development settings
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'metronic_project.settings.development')

Configure Base Settings

Update


            metronic_project/settings/base.py

with Django 5.1 configuration:

				
					from pathlib import Path
import sys

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent.parent

# Add apps directory to Python path
sys.path.insert(0, str(BASE_DIR / 'apps'))

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "your-secret-key-here"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

# Application definition
DJANGO_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

LOCAL_APPS = [
    # Will add demo apps here
]

INSTALLED_APPS = DJANGO_APPS + LOCAL_APPS

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",  # For static files
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "metronic_project.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR / "templates"],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "metronic_project.wsgi.application"

# Database
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

# Internationalization
LANGUAGE_CODE = "en-us"
TIME_ZONE = "UTC"
USE_I18N = True
USE_TZ = True

# Static files (CSS, JavaScript, Images)
STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_DIRS = [
    BASE_DIR / "static" / "dist",
    BASE_DIR / "static" / "public",
]

# STORAGES setting for Django 5.1
STORAGES = {
    "default": {
        "BACKEND": "django.core.files.storage.FileSystemStorage",
    },
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

# Default primary key field type
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

Create Development Settings

Create


            metronic_project/settings/development.py

				
					from .base import *

# Development-specific settings
DEBUG = True

ALLOWED_HOSTS = ['localhost', '127.0.0.1', '0.0.0.0']

# Development database
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

# Debug toolbar (optional)
# INSTALLED_APPS += ['debug_toolbar']
# MIDDLEWARE += ['debug_toolbar.middleware.DebugToolbarMiddleware']

Create Production Settings

Create


            metronic_project/settings/production.py

				
					import os
from .base import *

# Production-specific settings
DEBUG = False

ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', '').split(',')

# Security settings
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_SECONDS = 31536000
SECURE_REDIRECT_EXEMPT = []
SECURE_SSL_REDIRECT = True
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

# Database configuration for production
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": os.environ.get('DB_NAME'),
        "USER": os.environ.get('DB_USER'),
        "PASSWORD": os.environ.get('DB_PASSWORD'),
        "HOST": os.environ.get('DB_HOST', 'localhost'),
        "PORT": os.environ.get('DB_PORT', '5432'),
    }
}

Test Project Setup

Verify your Django project is properly configured:

				
					# Check for configuration issues
python manage.py check

# Run initial migration
python manage.py migrate

# Test the development server
python manage.py runserver

You should see the Django welcome page at


            http://127.0.0.1:8000

. Your Django project foundation is now ready for Metronic integration!

Integrate Core

Now that you have a Django project foundation, let's create the core Django apps and set up the basic functionality to display Metronic layouts. We'll create two demo apps that showcase different layout styles using hardcoded sample data for demonstration purposes.

This section assumes you have completed the "Create Django Project" steps. We'll be creating minimal Django apps focused on demonstrating Metronic layouts with hardcoded data.

Create Django Apps

Create two Django apps to demonstrate different Metronic layout styles:

				
					# Create demo1 app (sidebar layout)
python manage.py startapp demo1 apps/demo1

# Create demo2 app (header layout)
python manage.py startapp demo2 apps/demo2

Update Settings with Apps

Add the new apps to your Django settings. Update


            metronic_project/settings/base.py

				
					# Update LOCAL_APPS in base.py
LOCAL_APPS = [
    "demo1",
    "demo2",
]

Configure Main URLs

Update


            metronic_project/urls.py

to include app URLs and serve static assets:

				
					from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.views.generic import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('demo1/', include('demo1.urls')),
    path('demo2/', include('demo2.urls')),
    path('', RedirectView.as_view(url='/demo1/', permanent=False)),
]

# Serve static files during development
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    # Add alias for assets/ to serve static files at /assets/ path
    urlpatterns += static('/assets/', document_root=settings.BASE_DIR / 'static')

Create Django Views

Create Django views for both demo apps. Instead of showing extensive hardcoded data here, reference the actual project files for complete examples.

Create


            apps/demo1/views.py

for the sidebar layout:

				
					from django.views.generic import TemplateView
from typing import Dict, Any


class IndexView(TemplateView):
    """Main dashboard view for demo1 with sidebar layout."""

    template_name = 'demo1/index.html'

    def get_context_data(self, **kwargs) -> Dict[str, Any]:
        context = super().get_context_data(**kwargs)

        # Add your hardcoded dashboard data here
        context.update({
            'page_title': 'Dashboard',
            'page_description': 'Central Hub for Personal Customization',
            # Add stats, activities, projects data...
        })

        return context

Create


            apps/demo2/views.py

for the header layout following the same pattern.

For complete view examples with extensive hardcoded sample data, refer to the actual project files: metronic-tailwind-django/apps/demo1/views.py and metronic-tailwind-django/apps/demo2/views.py in the downloaded integration package.

Create URL Configurations

Create URL patterns for both apps. For standard Django URL configuration patterns, refer to the official Django documentation .

Create


            apps/demo1/urls.py

				
					from django.urls import path
from . import views

app_name = 'demo1'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
]

Create


            apps/demo2/urls.py

				
					from django.urls import path
from . import views

app_name = 'demo2'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
]

Test Core Integration

Test your Django core setup before proceeding to template integration:

				
					# Start the development server
python manage.py runserver

# Test the URLs (in another terminal or browser)
curl -I http://127.0.0.1:8000/demo1/
curl -I http://127.0.0.1:8000/demo2/

You should see HTTP 200 responses, indicating your Django core is working. The pages will show Django's default template until we integrate the Metronic templates in the next section.

Integrate Styles

Now it's time to integrate the Metronic HTML templates and styling into your Django project. We'll copy the necessary assets, convert HTML templates to Django templates, and set up proper static file handling to bring your Metronic designs to life.

This section assumes you have completed the "Create Django Project" and "Integrate Core" steps. Make sure you have the Metronic HTML files available for copying assets and templates.

Copy Metronic Assets

Copy the Metronic assets from your downloaded Metronic HTML package:

				
					# Navigate to your Django project root
cd my-metronic-django

# Copy assets from Metronic HTML package
# Replace /path/to/metronic-tailwind-html with your actual path
cp -r /path/to/metronic-tailwind-html/dist/assets static/

# Verify the assets are copied
ls -la static/assets/

# You should see directories like:
# css/, js/, media/, plugins/, etc.

Create Base Template Partials

Create reusable template partials for common elements. These partials will contain the standard Django template syntax for loading static files and blocks.

Create


            templates/partials/head.html

with Django static file loading:

				
					{% raw %}{% load static %}
<meta charset="utf-8"/>
<title>
 {% block title %}{{ page_title|default:"Dashboard" }}{% endblock %} | Metronic
</title>
<meta admin="" content="{{ page_description|default:" dashboard"="" metronic="" name="description" }}"=""/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!--begin::Fonts(mandatory for all pages)-->
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" rel="stylesheet"/>
<!--end::Fonts-->
<!--begin::Vendor Stylesheets(used for this page only)-->
{% block vendor_css %}{% endblock %}
<!--end::Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<link href="{% static 'assets/plugins/global/plugins.bundle.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'assets/css/style.bundle.css' %}" rel="stylesheet" type="text/css"/>
<!--end::Global Stylesheets Bundle-->
<!--begin::Custom Stylesheets(optional)-->
{% block custom_css %}{% endblock %}
<!--end::Custom Stylesheets-->
{% endraw %}

Create


            templates/partials/scripts.html

and


            templates/partials/theme-mode.html

following the same pattern.

Convert Metronic HTML to Django Templates

Instead of showing extensive HTML code here, reference the actual Metronic HTML files and convert them to Django templates:

For Demo1 (Sidebar Layout):

• Copy the HTML structure from


            metronic-tailwind-html/dist/demo1/index.html

• Create


            templates/demo1/base.html

using the main layout structure
• Extract header, sidebar, and footer into partials:


            templates/demo1/partials/

• Create


            templates/demo1/index.html

with the dashboard content
• Replace static paths with


            {% static 'assets/...' %}

• Add Django template blocks:


            {% block content %}


            {% block title %}

, etc.

For Demo2 (Header Layout):

• Copy the HTML structure from


            metronic-tailwind-html/dist/demo2/index.html

• Follow the same conversion process as Demo1 but for header layout
• Create corresponding partials and templates in


            templates/demo2/

Key Django Template Conversions

When converting Metronic HTML to Django templates, apply these key transformations:

				
					{% raw %}
<!-- 1. Add Django template loading at the top -->
{% load static %}
{% extends "demo1/base.html" %}
<!-- 2. Convert static asset paths -->
<!-- FROM: src="assets/media/logos/logo.svg" -->
<!-- TO: -->
src="{% static 'assets/media/logos/logo.svg' %}"
<!-- 3. Add Django template blocks -->
{% block title %}{{ page_title }}{% endblock %}
{% block content %}
<!-- Your page content here -->
{% endblock %}
<!-- 4. Use Django context variables -->
<!-- FROM: <h1>Dashboard</h1> -->
<!-- TO: -->
<h1>
 {{ page_title|default:"Dashboard" }}
</h1>
<!-- 5. Loop through Django context data -->
{% for stat in stats %}
<div class="stat-card">
 {{ stat.title }}: {{ stat.value }}
</div>
{% endfor %}{% endraw %}

Configure Static Files Collection

Set up Django to properly serve your Metronic assets:

				
					# Collect static files for production
python manage.py collectstatic --noinput

# Verify static files are working
python manage.py runserver

# Test static file access in browser:
# http://127.0.0.1:8000/static/assets/css/style.bundle.css
# http://127.0.0.1:8000/static/assets/js/scripts.bundle.js

Test Complete Integration

Test your complete Metronic Django integration:

				
					# Start the development server
python manage.py runserver

# Test both layouts:
# http://127.0.0.1:8000/demo1/ (Sidebar layout)
# http://127.0.0.1:8000/demo2/ (Header layout)

# Check browser console for any JavaScript errors
# Verify all CSS and JS files are loading correctly

You should now see fully functional Metronic layouts with proper styling, JavaScript functionality, and Django integration!

Asset Management Commands (Optional)

For advanced asset management, you can create Django management commands to automate asset copying and watching. For Django management commands, refer to the Django Management Commands documentation .

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Django

Download

Clone Integration Repository

Copy Assets Folder

Setup Virtual Environment

Run Database Migrations

Start Development Server

Create Django Project

Prerequisites & Environment Setup

Install Django & Dependencies

Create Django Project Structure

Configure Split Settings

Configure Base Settings

Create Development Settings

Create Production Settings

Test Project Setup

Integrate Core

Create Django Apps

Update Settings with Apps

Configure Main URLs

Create Django Views

Create URL Configurations

Test Core Integration

Integrate Styles

Copy Metronic Assets

Create Base Template Partials

Convert Metronic HTML to Django Templates

Key Django Template Conversions

Configure Static Files Collection

Test Complete Integration

Asset Management Commands (Optional)

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Django

​ Download

Clone Integration Repository

Copy Assets Folder

Setup Virtual Environment

Run Database Migrations

Start Development Server

​ Create Django Project

Prerequisites & Environment Setup

Install Django & Dependencies

Create Django Project Structure

Configure Split Settings

Configure Base Settings

Create Development Settings

Create Production Settings

Test Project Setup

​ Integrate Core

Create Django Apps

Update Settings with Apps

Configure Main URLs

Create Django Views

Create URL Configurations

Test Core Integration

​ Integrate Styles

Copy Metronic Assets

Create Base Template Partials

Convert Metronic HTML to Django Templates

Key Django Template Conversions

Configure Static Files Collection

Test Complete Integration

Asset Management Commands (Optional)

On This Page

Download

Create Django Project

Integrate Core

Integrate Styles