Setting Up DaisyUI with Tailwind CSS v4 in a Django Project

This guide walks you through creating a Django project, installing Node.js, setting up Tailwind CSS v4, installing DaisyUI, configuring static files, and applying a custom theme configuration. Tailwind CSS v4 simplifies setup by eliminating the need for a tailwind.config.js file.

Step 1: Create a Django Project

Install Python and Django:

Ensure Python is installed. Install Django using pip:

pip install django

Create a Django Project:

Create a new Django project named config in the current directory:

django-admin startproject config .

Create a Django App:

Create an app named core:

python manage.py startapp core

Register the App:

Add core to INSTALLED_APPS in config/settings.py:

INSTALLED_APPS = [
    ...
    'core',
]

Step 2: Install Node.js

1. Download and Install Node.js:

   • Visit the Node.js website and download the LTS version suitable for your operating system.

   • Follow the installation instructions for your platform (Windows, macOS, or Linux).

   • Verify installation:

     node --version
     npm --version
     
     

Step 3: Install and Configure Tailwind CSS v4

Tailwind CSS v4 simplifies setup by not requiring a tailwind.config.js file.

1. Initialize NPM:

   In the project root directory, initialize a package.json and install Tailwind CSS v4:

   npm init -y
   npm install tailwindcss@latest @tailwindcss/cli@latest --save-dev
   
   

2. Create input.css:

   Create the directory structure for static files:

   core/
   └── static/
       └── core/
           └── src/
               ├── input.css
   
   

   In core/static/core/src/input.css, add the provided CSS configuration:

   @import "tailwindcss";
   
   @plugin "daisyui";
   
   @plugin "daisyui" {
       themes: light --default, dark --prefersdark;
   }
   
   [data-theme="light"] {
       --color-base-100: oklch(1 0 0);
       --color-base-200: oklch(0.967 0.001 286.375);
       --color-base-300: oklch(0.92 0.004 286.32);
       --color-base-content: oklch(0.141 0.005 285.823);
       --color-primary: oklch(0.705 0.213 47.604);
       --color-primary-content: oklch(0.98 0.016 73.684);
       --color-secondary: oklch(0.967 0.001 286.375);
       --color-secondary-content: oklch(0.21 0.006 285.885);
       --color-accent: oklch(0.967 0.001 286.375);
       --color-accent-content: oklch(0.21 0.006 285.885);
       --color-neutral: oklch(0.967 0.001 286.375);
       --color-neutral-content: oklch(0.552 0.016 285.938);
       --color-info: oklch(0.70 0.2 220);
       --color-info-content: oklch(0.98 0.01 220);
       --color-success: oklch(0.65 0.25 140);
       --color-success-content: oklch(0.98 0.01 140);
       --color-warning: oklch(0.80 0.25 80);
       --color-warning-content: oklch(0.20 0.05 80);
       --color-error: oklch(0.577 0.245 27.325);
       --color-error-content: oklch(0.98 0.01 30);
       --color-muted: oklch(0.967 0.001 286.375);
       --color-muted-foreground: oklch(0.552 0.016 285.938);
       --radius-selector: 1rem;
       --radius-field: 0.25rem;
       --radius-box: 0.5rem;
       --border: 1px;
       --depth: 1;
       --noise: 0;
   }
   
   [data-theme="dark"] {
       --color-base-100: oklch(0.141 0.005 285.823);
       --color-base-200: oklch(0.21 0.006 285.885);
       --color-base-300: oklch(0.274 0.006 286.033);
       --color-base-content: oklch(0.985 0 0);
       --color-primary: oklch(0.646 0.222 41.116);
       --color-primary-content: oklch(0.98 0.016 73.684);
       --color-secondary: oklch(0.274 0.006 286.033);
       --color-secondary-content: oklch(0.985 0 0);
       --color-accent: oklch(0.274 0.006 286.033);
       --color-accent-content: oklch(0.985 0 0);
       --color-neutral: oklch(0.274 0.006 286.033);
       --color-neutral-content: oklch(0.705 0.015 286.067);
       --color-info: oklch(0.70 0.2 220);
       --color-info-content: oklch(0.98 0.01 220);
       --color-success: oklch(0.65 0.25 140);
       --color-success-content: oklch(0.98 0.01 140);
       --color-warning: oklch(0.80 0.25 80);
       --color-warning-content: oklch(0.20 0.05 80);
       --color-error: oklch(0.704 0.191 22.216);
       --color-error-content: oklch(0.98 0.01 30);
       --color-muted: oklch(0.274 0.006 286.033);
       --color-muted-foreground: oklch(0.705 0.015 286.067);
       --radius-selector: 1rem;
       --radius-field: 0.25rem;
       --radius-box: 0.5rem;
       --border: 1px;
       --depth: 1;
       --noise: 0;
   }
   
   

Step 4: Install DaisyUI

1. Install DaisyUI:Install DaisyUI as a Tailwind CSS plugin:

   npm install -D daisyui
   
   

Step 5: Configure Static Files in Django

1. Set Up Static Files:Ensure STATIC_URL and STATICFILES_DIRS are configured in config/settings.py:

   STATIC_URL = 'static/'
   STATICFILES_DIRS = [BASE_DIR / "core/static"]
   

Step 6: Compile Tailwind CSS with DaisyUI

1. Run the Tailwind CLI:Compile input.css to generate output.css and watch for changes:

   npx @tailwindcss/cli -i ./core/static/core/src/input.css -o ./core/static/core/src/output.css --watch
   
   

Step 7: Integrate with Django Templates

1. Create a Base Template:

   Create a template directory and a base HTML file:

   core/
   └── templates/
       └── core/
           └── base.html
   
   

   Add the following to core/templates/core/base.html:

   {% load static %}
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Django Project</title>
       <link href="{% static 'core/src/output.css' %}" rel="stylesheet">
   </head>
   <body data-theme="light">
       <div class="container mx-auto p-4">
           {% block content %}
           {% endblock %}
       </div>
   </body>
   </html>
   

2. Collect Static Files:

   Run the following to collect static files:

   python manage.py collectstatic
   
   

3. Create a Sample Template:

   Create core/templates/core/index.html:

   {% extends 'core/base.html' %}
   
   {% block content %}
   <div class="hero min-h-screen bg-base-200">
       <div class="hero-content text-center">
           <div class="max-w-md">
               <h1 class="text-5xl font-bold">Hello, DaisyUI!</h1>
               <p class="py-6">This is a sample page styled with Tailwind CSS v4 and DaisyUI.</p>
               <button class="btn btn-primary">Get Started</button>
           </div>
       </div>
   </div>
   {% endblock %}
   
   

4. Set Up URL Routing:

   Update config/urls.py:

   from django.contrib import admin
   from django.urls import path
   from core.views import index
   
   urlpatterns = [
       path('admin/', admin.site.urls),
       path('', index, name='index'),
   ]
   
   

   Create core/views.py:

   from django.shortcuts import render
   
   def index(request):
       return render(request, 'core/index.html')
   
   

Step 8: Run the Django Development Server

1. • randon the Server**:

   python manage.py runserver
   
   

2. Access the Application:

   Open your browser and navigate to http://127.0.0.1:8000/ to see the styled page.

Notes

• The django-admin startproject config . command creates the project in the current directory, avoiding a nested folder.
• Tailwind CSS v4 does not require a tailwind.config.js file, simplifying setup.
• Ensure the Tailwind CLI is running in a separate terminal to watch for CSS changes.
• Run python manage.py collectstatic when deploying or when static files change.
• The provided CSS uses OKLCH color values for modern color management; ensure browser compatibility if targeting older browsers.
• DaisyUI’s data-theme attribute allows switching between light and dark themes dynamically.