Tailwind CSS + daisyUI in Wagtail/Django: Pragmatic Setup Without the Node Nightmare

## Why use Tailwind in Wagtail at all?

# The Setup in 30 Seconds

"Project Structure"

Here is the translation:

myproject/
├── frontend/                    # All Node stuff isolated
│   ├── package.json
│   ├── tailwind.config.js       # Optional in v4 – needed for daisyUI themes
│   └── src/
│       └── input.css            # Entry point with @import "tailwindcss"
├── myproject/
│   ├── settings/
│   ├── static_src/              # Global static files
│   └── templates/
│       └── base.html
├── static/                      # Build output from Tailwind goes here
│   └── css/
│       └── app.css              # ← gets collectstatic-ed by Django/Wagtail
├── manage.py
└── Dockerfile

Could you please provide the text you would like me to translate? It seems like only the title "package.json – minimal" was included, but no actual text to translate. Please share the full text and I'll be happy to help!

Here is the translated text:

{
  "name": "devmaker-frontend",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ../static/css/app.css --minify",
    "watch": "tailwindcss -i ./src/input.css -o ../static/css/app.css --watch"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.0",
    "daisyui": "^5.0.0",
    "tailwindcss": "^4.1.0"
  }
}

---

**Note:** This text is a **JSON configuration file** (specifically a `package.json` file for a Node.js/frontend project). It is **not a natural language text** and therefore **does not require translation**. The content consists of:

- **Technical keys and values** (e.g., `"name"`, `"version"`, `"scripts"`)
- **Command-line instructions** (e.g., `tailwindcss -i ./src/input.css ...`)
- **Dependency names and version numbers** (e.g., `"tailwindcss": "^4.1.0"`)

All of these are **language-neutral technical identifiers** that remain identical in any language context. The file has been reproduced exactly as provided, as any modification would alter its functionality.

input.css – the heart of it all

Here is the translation of the text into English:

@import "tailwindcss";

/* Load daisyUI as a plugin, with two themes (light/dark) */
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  logs: false;
}

/* Scan Wagtail templates AND Python files.
   Important: Wagtail snippets/StreamFields render templates
   that Tailwind would otherwise not find. */
@source "../../**/templates/**/*.html";
@source "../../**/*.py";

/* Custom theme variables – overrides daisyUI defaults */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-brand: oklch(70% 0.18 200);
}

/* Custom component layer for recurring Wagtail patterns */
@layer components {
  .prose-article {
    @apply prose prose-invert max-w-none
           prose-headings:font-bold
           prose-code:text-brand prose-code:bg-base-200
           prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded;
  }
}

Django Settings

Here is the translation of the text into English:

# settings/base.py
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent.parent

STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / "staticfiles"

STATICFILES_DIRS = [
    BASE_DIR / "static",          # ← Tailwind output goes here
    BASE_DIR / "myproject" / "static_src",
]

# Cache-busting for CSS/JS – important, otherwise visitors will see old CSS
STORAGES = {
    "default": {
        "BACKEND": "django.core.files.storage.FileSystemStorage",
    },
    "staticfiles": {
        "BACKEND": "django.contrib.staticfiles.storage.ManifestStaticFilesStorage",
    },
}

Please provide the text you would like me to translate. You only gave me a label/description ("base.html – einbinden mit data-theme") but no actual text to translate. However, if this short phrase itself is what needs to be translated, here it is: **"base.html – include with data-theme"**

Here is the translated text. Please note that this is an HTML/Django template code, which is largely language-agnostic. The structural and technical parts remain unchanged, as they are programming syntax. Only the visible text content has been translated:

```html
{% load static wagtailcore_tags %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ page.title }}{% endblock %}</title>

  <link rel="stylesheet" href="{% static 'css/app.css' %}">
</head>
<body class="min-h-screen bg-base-100 text-base-content antialiased">
  <header class="navbar bg-base-200 shadow-sm">
    <div class="flex-1">
      <a href="/" class="btn btn-ghost text-xl">devmaker.net</a>
    </div>
  </header>

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

**Note:** This is a Django/Wagtail HTML template. The code itself does not require translation, as it consists of:
- **HTML markup** (universal)
- **Django template tags** (programming syntax)
- **CSS class names** (technical identifiers)
- **The website name** `devmaker.net` (a proper noun, unchanged)

No translatable natural language text was found in this template.

Dev Workflow: two terminals, done

# Terminal 1: Tailwind in watch mode
cd frontend
npm run watch

# Terminal 2: Django runserver
python manage.py runserver

# Once during initial setup:
cd frontend && npm install

Production: Multi-Stage Docker Build

Here is the translation of the text into English:

# ---------- Stage 1: Tailwind Build ----------
FROM node:22-alpine AS frontend-build
WORKDIR /app/frontend

COPY frontend/package*.json ./
RUN npm ci --no-audit --no-fund

# We need the templates AND Python files for scanning
COPY frontend/ ./
COPY myproject/ /app/myproject/
COPY static/ /app/static/

RUN npm run build

# ---------- Stage 2: Python Runtime ----------
FROM python:3.13-slim AS runtime
WORKDIR /app

RUN apt-get update && apt-get install -y --no-install-recommends \
    libpq5 && rm -rf /var/lib/apt/lists/*

COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

# Source code
COPY . .

# Pull in the finished Tailwind CSS from Stage 1
COPY --from=frontend-build /app/static/css/app.css /app/static/css/app.css

# Django collectstatic – now with Tailwind included
RUN python manage.py collectstatic --noinput

CMD ["gunicorn", "myproject.wsgi:application", "--bind", "0.0.0.0:8000"]

daisyUI in Wagtail templates

Here is the translated text:

{# templates/blog/blocks/topic_card.html #}
{% load wagtailcore_tags wagtailimages_tags %}

<article class="card bg-base-200 shadow-md hover:shadow-xl transition-shadow">
  {% if page.promo_img %}
    {% image page.promo_img fill-800x400 class="card-img-top rounded-t-2xl" %}
  {% endif %}
  <div class="card-body">
    <h2 class="card-title">
      <a href="{% pageurl page %}" class="link link-hover">{{ page.title }}</a>
    </h2>
    <p class="text-base-content/70">{{ page.summary }}</p>
    <div class="card-actions justify-end mt-4">
      {% for tag in page.tags.all %}
        <span class="badge badge-outline badge-sm">{{ tag }}</span>
      {% endfor %}
    </div>
  </div>
</article>

**Note:** The provided text is a **Django/Wagtail HTML template** containing code, template tags, and CSS class names. Since this is **source code**, it does not require translation — all technical identifiers, template syntax, and class names must remain unchanged to preserve functionality. There is no natural language content in this template that would need to be translated from German to English.

Theme Switcher with Alpine.js (optional)

Here is the translated text:

<div x-data="{ theme: localStorage.getItem('theme') || 'dark' }"
     x-init="document.documentElement.setAttribute('data-theme', theme)">
  <button class="btn btn-ghost btn-circle"
          @click="theme = theme === 'dark' ? 'light' : 'dark';
                  document.documentElement.setAttribute('data-theme', theme);
                  localStorage.setItem('theme', theme)">
    <span x-show="theme === 'dark'">☀️</span>
    <span x-show="theme === 'light'">🌙</span>
  </button>
</div>

**Note:** The provided text is **HTML/JavaScript code**, not a natural language text. Therefore, **no translation is necessary or possible**, as programming code is language-independent and universally written in English syntax. The code remains identical in its original form, as translating it would alter its functionality.

If you meant to translate a **description** of this code, please provide the text you would like translated, and I will be happy to assist.

# Lessons Learned (the real ones)

**What I Left Out**

## Conclusion & Outlook