Install daisyUI for Django

How to install Tailwind CSS and daisyUI in a Django project, without Node.js

1. Create a new Django project

Install Python according to the official Python docs

Install Django

Terminal

python -m pip install Django

Create a new Django project called myapp and navigate into the project directory

Terminal

django-admin startproject myapp
cd myapp

2. Create a homepage in Django

Create a template file

myapp/templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Django App</title>
    {% load static %}
    <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css" />
</head>
<body>
    <button class="btn btn-primary">Hello daisyUI</button>
</body>
</html>

Create a myapp/views.py file

myapp/views.py

from django.shortcuts import render

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

Add the view to the myapp/urls.py file

myapp/urls.py

  from django.contrib import admin
  from django.urls import path
+ from . import views

  urlpatterns = [
      path("admin/", admin.site.urls),
+     path("", views.home, name="home"),
  ]

Add the app name to myapp/settings.py

myapp/settings.py

  INSTALLED_APPS = [
      "django.contrib.admin",
      "django.contrib.auth",
      "django.contrib.contenttypes",
      "django.contrib.sessions",
      "django.contrib.messages",
      "django.contrib.staticfiles",
+     "myapp",
  ]

3. Add Tailwind CSS and daisyUI

Fast install

The command below,

Downloads latest version of Tailwind CSS Standalone executable file for your OS, from GitHub
Downloads latest version of daisyUI bundle file from GitHub
Creates input.css file with Tailwind CSS and daisyUI
Generates output.css file for the first time

Linux or MacOS: (see the install script)

Terminal

cd myapp/static/css && curl -sL daisyui.com/fast | bash

Windows: (see the install script)

PowerShell

cd myapp/static/css && powershell -c "irm daisyui.com/fast.ps1 | iex"

Manual install

Get Tailwind CSS executable

Follow Tailwind CSS guide and get the latest version of Tailwind CSS executable for your OS.

For example:

Terminal

# Run the corresponding command for your OS

# Linux
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl

# MacOS
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64

# Windows
curl -sLo myapp/static/css/tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe

Make the file executable (For Linux and MacOS):

Terminal

chmod +x myapp/static/css/tailwindcss

Get daisyUI bundle JS file

Run this code to download latest version of daisyUI as a single js file and put it next to Tailwind's executable file.

Terminal

curl -sLO myapp/static/css/daisyui.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs
curl -sLO myapp/static/css/daisyui-theme.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs

Add Tailwind CSS and daisyUI

Add Tailwind CSS and daisyUI to your CSS file.
Address your HTML and other markup files in the source function.

myapp/static/css/input.css

@import "tailwindcss";

@source not "./tailwindcss";
@source not "./daisyui{,*}.mjs";

@plugin "./daisyui.mjs";

/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
@plugin "./daisyui-theme.mjs"{
  /* custom theme here */
}

4. Run the Tailwind CSS executable to generate output.css

Using --watch will automatically update the output.css file when you change the input.css file.
For CI/CD, run the command without --watch to generate the output.css file once.

Terminal

myapp/static/css/tailwindcss -i myapp/static/css/input.css -o myapp/static/css/output.css --watch
# For Windows
myappstaticcss\tailwindcss.exe -i myapp/static/css/input.css -o myapp/static/css/output.css --watch