the best way to integrate Django 6.0 with Tailwind V4

Test, test, test, test, test, test, test. Alright guys, welcome back to another video. So, as many of you know Django 6.0 just came out recently, just a couple of weeks ago. And in this video, I want to teach you how to integrate Django with Tailwind. And the reason I'm making this video is because I see a lot of people who struggle to integrate Django or Python frameworks with Node.js technologies, right? And hopefully by integrating Django with Tailwind in this video i can explain that entire process and make it a lot easier for you guys to integrate npm packages into your django application this is not like this is not like building a backend api with django and django rest and then integrating that with some react front-end application or something no this is literally integrating tailwind into your django templates let's get started step one create a new django project using the django admin command start project and then Just give it a name. I'll just call this Tailwind Integration over here. CD into it. And here you have your Django project. Now one extra thing I going to do over here is I going to use UV to initialize my project This is a separate tool UV is what I use to manage all of my Python projects and their virtual environments and dependencies and everything It much faster and better than pip install and I highly recommend you guys start using it as well. Now we're going to install Django into this virtual environment as well and we're also going to initialize an empty npm package over here. We'll just use the default options for everything and now this is the project that we have so far. Now let's install Tailwind over here. I'm going to use Bun to install this just because it's a lot faster than npm and we're going to install Tailwind CSS and also the CLI to use Tailwind CSS. Now let's create our first Django app. I'll just call this app. Add it to the list of installed apps as well so we can use it and then let's create a template in here create a templates directory and create a base.html over here let's create a heading over here that has a couple of tailwind classes so we can actually tell that this is working let's say text red 500 font for excel or something and then let's just print a hello world over here let also go up in the head tag over here and link a css file this will be in the static folder and we call this we call this globals okay and let also import the static tag up at the top of our template. Now let's create a static directory in this app and create the globals.css file and then let's import tailwind css over here. Now let's add a css watch command over here css watch there we go and we will call npx tailwind css we'll pass in an input which will be app slash static slash globals.css and also pass in an output that will be app slash static slash output.css and then make sure to watch this file for any changes now if i run this command by using npm run css watch it's going to run tailwind and watch the file for any changes and it's going to create the output.css file which has all of our css over here now we just need to make sure that we're importing the correct file from in our templates and over here this should be output.css instead of base instead of globals.css now if i just go over to urls.py and just add a simple url over here we can use a simple template view which we can import from django import template view and just pass in a template called based on HTML There we go Template name make sure to add the name of the argument over here. Let's let this CSS watch command run over here and open up a new terminal. Make sure you're in the correct virtual environment, and then let's run python manage.py run server. Okay, quick typo to fix. I forgot to close the static tag over here. Make sure you do that. Don't be me. and also this class is supposed to be text for excel instead of font for excel and if you go back to our page over here you'll see that the tailwind classes are being applied perfectly fine so that's how you can integrate tailwind into your django project without having to create a separate framework or a separate api and still continue to use django templates on all the other django features that we all love if you like this video press like comment subscribe all of those wonderful things and a quick self-promotion plug over here i'm a freelance web developer and i I build web apps and mobile apps for people. If this is something you're interested in, or if you know someone who's interested in this and you want to work with me on some sort of a project, you'll find the top link in the description, which will take you to book a call with me, and then we can discuss everything that you want, and we can start working on it. That's all from me for today, guys. Thank you for watching, and I'll see you in the next video.