Integrate DaisyUI

Integrate DaisyUI#

Integrate DaisyUI with Django using Vite as builder tool - All integration steps and Coding Sample.

For newcomers, DaisyUI is a lightweight, pure CSS component library for Tailwind that provides semantic class names for common UI components. It’s focused on simplicity and customization through class-based approaches with zero JavaScript dependencies.

👉 DaisyUI, Django, and Vite - Integration Sample

Django Berry Dashboard - Open-Source Seed project generated by AppSeed.

Initial Django Setup#

First, let’s create a new Django project and set up the virtual environment:

# Create and activate virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install Django
pip install django

# Create a new Django project
django-admin startproject myproject
cd myproject

# Create a main app
python manage.py startapp main

# Run initial migrations
python manage.py migrate

Configure Django Settings#

Add your new app to settings.py:

# myproject/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'main',  # Add your new app
]

# Configure static files
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

Set up Tailwind CSS and DaisyUI#

# Initialize npm
npm init -y

# Install required dependencies
npm install -D tailwindcss postcss autoprefixer daisyui @tailwindcss/typography

Configure Tailwind with DaisyUI#

Create the Tailwind configuration file

npx tailwindcss init

Update the configuration

// tailwind.config.js

module.exports = {
    content: [
        './main/templates/**/*.html',
        './templates/**/*.html',
        './static/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('daisyui'),
        require('@tailwindcss/typography'),
    ],
    daisyui: {
        themes: ["light", "dark", "cupcake"], // Add your preferred themes
    }
}

Create CSS Structure#

Create your main CSS file:

mkdir static/css
touch static/css/main.css

Add the Tailwind directives to main.css:

/* static/css/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Set Up Build Process#

Add build scripts to package.json:

{
    "scripts": {
        "build": "tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch"
    }
}

Create Base Template#

Create a base template that includes DaisyUI

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Django DaisyUI{% endblock %}</title>
    {% load static %}
    <link href="{% static 'css/output.css' %}" rel="stylesheet">
</head>
<body>
    <div class="min-h-screen bg-base-100">
        <!-- Navbar -->
        <div class="navbar bg-base-200">
            <div class="flex-1">
                <a class="btn btn-ghost normal-case text-xl">My Project</a>
            </div>
            <div class="flex-none">
                <ul class="menu menu-horizontal px-1">
                    <li><a href="{% url 'home' %}">Home</a></li>
                    <li><a href="{% url 'about' %}">About</a></li>
                </ul>
            </div>
        </div>

        <!-- Content -->
        <div class="container mx-auto px-4 py-8">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</body>
</html>

Create URL Patterns#

Set up your URLs:

# myproject/urls.py

from django.urls import path
from main import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
]

Create Views#

Add views in your main app:

# main/views.py

from django.shortcuts import render

def home(request):
    return render(request, 'main/home.html')

def about(request):
    return render(request, 'main/about.html')

Running the Project#

Start the Tailwind build process:

npm run build

In a separate terminal, run the Django development server:

python manage.py runserver

At this point, the Django starter runs integrated with DaisyUI and we can update the project with more features and UI components.