Build a Django Starter with Tailwind & DaisyUI + Theme Toggle (Full Tutorial)

Build a Django Starter with Tailwind & DaisyUI + Theme Toggle (Full Tutorial)

486 Lượt nghe
Build a Django Starter with Tailwind & DaisyUI + Theme Toggle (Full Tutorial)
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