Build a reusable Django starter from scratch—with Tailwind CSS, DaisyUI components, a custom user model, and a persistent light/dark theme toggle. Clone the finished project anytime to kickstart your own apps!
🚀 What You’ll Learn
Scaffold a new Django project with a home app and an accounts app (custom user model)
Configure templates and static directories
Integrate Tailwind CSS via the CLI and watch for changes
Add DaisyUI, a lightweight Tailwind plugin with pre-built components and themes
Build a responsive navbar with a light/dark theme toggle that remembers your choice
Style your homepage with Tailwind utility classes
Clone the repo and run it locally in minutes
📋 Prerequisites
Python 3.10+ (along with pip or uv)
Node.js & npm (or an alternative like Yarn/PNPM)
⏱️Chapters:
00:00 – What We’ll Make & What Is a “Starter Project”
01:01 – Creating the Project Directory
01:46 – Prerequisites: Python 3.10+ & Node.js
02:11 – Create & Activate Virtual Environment (venv)
02:35 – Install Django
02:53 – Start Django Project
03:32 – Create Templates & Static Directories
04:12 – Create Home & Accounts Apps
05:19 – Configure settings.py (Templates, Static, Installed Apps)
06:33 – Create input.css
07:14 – Create base.html
07:39 – Link Stylesheet with `{% load static %}`
08:54 – Build Navbar: Create nav.html & Include in base.html
10:10 – Define Custom User Model
10:56 – Define Homepage View & Template
12:23 – Add Homepage Route (home/urls.py)
13:29 – Include Home URLs in Project’s urls.py
14:12 – Make Migrations → Error: Missing `AUTH_USER_MODEL`
15:39 – Run Migrations & Start Server
16:10 – Install Tailwind CSS + CLI, Init package.json, Watch CSS
19:34 – Install & Configure DaisyUI
20:38 – Create Navbar Using DaisyUI Components
21:32 – Set Up Light/Dark Themes with DaisyUI
22:17 – Test Theme Switching with Chrome DevTools
23:35 – Add Theme Toggle Switch to Navbar
25:41 – Define `{% block scripts %}` in base.html
26:34 – Write Theme Toggle JavaScript
27:22 – Add Event Listener for Toggle Switch
28:17 – Detect Preferred Theme (matchMedia in JS)
30:01 – Set Theme via `document.documentElement`
31:24 – Save User Theme Preference to localStorage
32:29 – Load Theme from Saved or System Preference
34:45 – Style the Home Page (Minimalist)
36:26 – Add Footer
38:28 – Clone the Repo & Starter Setup Walkthrough
41:01 – 🎉 Final Thoughts & Wrap-up
👉 Get the code
https://github.com/PikoCanFly/django-daisy-seed
Join this channel to get access to perks:
https://www.youtube.com/channel/UC8NoIbiu78iGMnh_xezgx8A/join
#django #tailwind #daisyUI #python #fullstack