Easily add Tailwind CSS to Django 💨

hi Tom here welcome back I'm going to show you the simplest way to add Tailwind CSS to Jango here's what the final product will look like as you can see this is our Jango app rendering a page with Tailwind CSS in a nice masonry layout so we'll create this app and I'll also show you how to do this using Tailwind CSS Tailwind CSS if you don't know is a framework on top of CSS which allows you to write CSS in in a bit of a shorter way it is then translated into CSS let's get into it okay here we are on the written guides Link in the description below as usual let's in go ahead and install our Django app so I'm just here with a new V environment and then so pip install Django and python. n and then we copy this in as well to create our app and then we create an app called Sim as usual and create a janger project okay there they are call Sim and then your manage. pipe and then we're going to add Sim and register it in the installed apps in core okay so we're going to settings and then go to installed apps installed apps and then add Sim yeah cool and now we're going to render our Jango page with some unstyled images to which will'll then dress up with TN CSS so go to Sim and then views and paste the Sim so and these are all sample images from pixum which is good good for stock sample images we're going to create a urls.py file in the Sim folder in here url. 5 paste it in just see we render one our view there and then we need to update the our core URLs to include the Sim URLs so we go into as usual core URLs P this in and there's Sim now next we're going to create the template that we're going to render standard stuff go into SIM and then create the templates folder in here and now we're going to create our home.html file with this content you can see it's a little bit long okay and so in here we create home HTML and then paste in that HTML I'll walk you through this actually in a second let's run the server manag run server it's running don't worry about the unapplied migrations great so that is what we wanted doesn't look like the finished product yet because it's not so to run you through actually let's get it working first and then I'll talk to you what the Tailwind is doing because at the moment we've got Tailwind in our these are Tailwind classes here but the is not just textt the Tailwind CSS is not creating any CSS underneath so we need to do that and to do that we going to install tail CSS because as I said we need to convert the Tailwind CSS that we've got at the moment in our HTML templates into CSS the browser only reads CSS and so we need something that's going to run whenever we make a change in our HTML to see the change and then convert that Tailwind CSS in HTML to real CSS or pure CSS we're going to do it the simplest way which is using the CSS tail when CSS Standalone C CLI so and you need to go to this GitHub link which I'll correct this link here when released when I put this out and then choose your operating system here I'm MAC M1 so I choose that and then we need to add this add your operating system to the end of the curl link here and then go into your into your terminal paste it in to download D CLI okay downloaded and now we should see it yeah you can see it's there and now we can rename it just for convenience because we're going to be calling it so rename it whatever it's called for you just call it rename it to s tail and CSS there it is and then we need to make it executable which is this on Linux and Mac maybe it's something else on Windows I don't think so though okay we've now installed it pretty easy okay so now we're here and we're going to create our RN CSS config file so copy this and then we're going to create yeah this essentially tells us we need this config file to tell it which where our Tailwind is in our templates and then so that it can get that and then convert it to the CSS for us it's quite simple to do okay so let's copy this and so this is the command which is going to access the tli that we've just created great and now it should have created a config file in T and CSS there it is and you'll see it pop up there it is we're going to give the pattern for where our templates are stored in HTML that tell when we then convert so you can copy this and then paste it over and yep and so this goes to anything templates and then anything to HTML so this means for any app we add with this format this regex format we will then it will tell and will detect it great okay now let's add this actual CSS T and CSS file we're going to create a static folder in Sim to store our T and CSS which is static that's static and then what do we need to do create a CSS folder and then create one called input. CSS and so copy this in these are our Tailwind elements and now we're going to start our Tailwind Watcher so this is I'm explaining a little bit more but here we're going to run the Tailwind CLI and we're going to keep this running always whenever you're developing and it will pick up the changes and it's going to convert anything in our input CSS to our output CSS so let's copy that maybe it will become a bit clearer as we go through it great our Watcher is now running as you can see it very fast and now if we go back to our server which is still running for me but you can go to it if it's yeah type in that if it's not photo good with refresh that hasn't worked okay let's find out what the issue is there um let's just refresh the Ser so you can see we're running The Watcher now and then the Watcher has generated this output CSS file with all the Tailwind as CSS not as Tailwind CSS and then we import that output here into our HTML and so it then knows what rounded LG which is tail and syntax what that CSS actually is because it's important as a class okay and now we refresh our page and there you go so all that CSS is now activated and if we go here to look at that those straw Aries we can see here that we have these Tailwind CSS classes which are then converted into real CSS here that's what that class means and so that's pretty much it but just to show you give to demonstrate a little bit more so you can see out leave your Watcher running and then I make one change let's say to this I will let's not make it rounded anymore and this is photo one so in the top light and you can see it's rebuilt so it's seen that change that I've made because it's watching here our template our files here of which our template is one seen that I've changed the tailwind and now if we go back and refresh the page you can see this is no longer rounded that's an extremely unclear example but you can see that's no longer rounded let's make it a bit clearer let's change this to um border and then border if I remember the syntax let's just add more padding as well PX live watch has updated refresh and you can see there's a a border there with some padding in between so yeah you get the point and let's get rid of that as well so that's it as you can see really simple I I just want to mention this again a small mistake that you'll probably make that I've made lots of times in the past this is really nice setup with d Jango really easy but remember to run your Watcher what will happen is you'll make a you'll come into your project maybe late at night and then you'll make a change and you'll you'll refresh your page and'll be why is this not changing and the reason is because your Watcher won't be running by that you're making changes to the Tailwind in your HTML classes here but then it's not because your Watcher isn't running it's not being translated into CSS classes and then coming out here in output so yeah bear in mind for that and a few suggestions I make here are to add a I'll tidy this up as well but to add you could add a watch command here to your manage.py so that every time you run manage.py you run the Watcher or you can add a nice compound configuration if you're using py charm which are easy to do and you you go into edit configurations and then compound around somewhere here compound yeah and you can run multiple things at the same time so yeah that's it I hope that hope you found that really useful and as you can see it's really easy to do and I recommend this way using the CLI because it's the neatest way rather than strapping in Jango Tailwind or other particular packages just do it with this neat external package from it so if you enjoyed this guide check out below for more contents that I release weekly about Django all for free and updates for my product phot designer which allows you to build Jango front end much much faster besides that I'm making more content weekly here a few more videos all the best you

Channel: Tom Dekan

Views: 3,940

Keywords:

Id: X-IecxKV_pI

Length: 9min 17sec (557 seconds)

Published: Sun Feb 18 2024