How to add Tailwind CSS 4 to Django Project + Upgrade from Older Versions (Easy) [ Tailwind CLI ]

In this tutorial, learn how to integrate Tailwind CSS version 4 into your Django projects. We'll start by creating a new Django project and adding Tailwind using Tailwind CSS CLI. Then, we’ll show you how to upgrade an existing Django project that uses an earlier version of Tailwind.

🔹 Follow along for step-by-step instructions covering:
✅ Project setup & Tailwind installation
✅ Static file configuration & linking Tailwind in Django templates
✅ Automating the build process with npm
✅ Upgrading from Tailwind CSS v3 to v4


📌 Timestamps:
00:00 – Introduction:
Overview of the video: Adding Tailwind CSS v4 and upgrading an older setup.

00:00:24 – Tailwind CSS Major Upgrade:
Understanding what changed in Tailwind v4.

00:00:49 – Video Structure & Overview:
Explaining the two parts: Starting a new project & upgrading an existing one.

Part 1: Installing Tailwind in a New Django Project
00:01:06 – Setting Up a New Django Project:
Creating a Django project & app and initializing the structure.

00:03:00 – Configuring Templates:
Editing the base template with Tailwind classes to test styling.

00:04:29 – Setting Up Views & URLs:
Creating a landing page and configuring Django to serve it.

00:05:24 – Installing Node, NPM, and Tailwind CLI:
Checking Node/NPM installation and installing Tailwind via npm.

00:06:40 – Configuring Static Files:
Creating the CSS file and configuring Django to find it.

00:09:02 – Linking Tailwind CSS:
Adding the CSS link in the base template and verifying Tailwind integration.

Part 2: Upgrading an Existing Django + Tailwind Project
00:09:50 – Starting the Upgrade Process:
Upgrading a Django project that already uses Tailwind.

00:12:08 – Running the Tailwind Watch Process:
Using npm to continuously compile Tailwind CSS.

00:12:46 – Testing the Upgraded Project:
Verifying that the upgrade was successful.

00:13:00 – Conclusion:
Final remarks & what’s next!

#Django #TailwindCSS #Tailwind