Django & TailwindCSS! Learn how to integrate and create a basic starter project.

welcome to Django and Tailwind CSS now in this course I'm going to show you how to integrate a Tailwind project with Django leveraging Django's built-in features for managing static files that means serving the static files in development and then referencing them in production on a static file server like an S3 bucket or something like that now the reason we use Tailwind in our projects is because it rethinks how we actually style all of our HTML components so for example your headers right by default when you just use an H1 tag it has some standardized styles to them Tailwind removes all of those Styles you can add defaults but the thing is you want to be really explicit when using Tailwind you want to give it the exact Properties or the exact classes that you want to assign to that specific header and this is true for all HTML elements it's really fascinating the other thing is how Tailwind works with color is really nice as well so the support out of the box from the CSS class itself to have a standard mode a hover mode and a dark mode so that means that you can have different colors for each one of those states of Any Given element and it just works it's really cool and it's one of the reasons that I really like Tailwind CSS is like how well thought out each component is now this is a little bit different than a front-end framework like bootstrap bootstrap has an opinion about how things should look sure you could customize them but when you use an element in bootstrap you actually just provide some sort of class and then there's a lot of things that are inferred from that class Tailwind doesn't work that way if you want a rounded corner you have to use the rounded class if you want a certain kind of background you have to use the background class if you want a certain kind of hover color for your text and your background you have to denote those things so the Tailwind classes start to get pretty big which is okay and like I said there's a way to shortcut that and there's a lot of stuff that you can do with Tailwind that we're really just going to be scratching the surface here my goal with this course is to show you how to integrate it with Django so then you can start building on top of it from there have a really solid foundation with that and then we'll talk about some of the really cool features with Tailwind as we go forward as well so if you have any questions let me know my name is Justin I'm going to be taking you through this one step by step now it is probably a good idea to have some familiarity with CSS and maybe with Django but really this is just fundamental for both things so I will maybe go a little fast for some of you that aren't that familiar with those tools but overall it's meant to be a really comprehensive look at how to set these tools up together so they work well now and in the future and if you integrate something like view or react it should still work with those things as well let's go ahead in general [Music] all right so the requirements for this series I'm going to Breeze through them first and then we'll go back and go through each one in depth first off is python 3.8 or above next is the latest node.js LTS then we're going to need a text editor I recommend Visual Studio code then we're going to be using Django 4.1 and I'll talk about 4.2 in a moment we'll be using Tailwind CSS and in this case I'm using version 3 2.4 is not as necessary but definitely version three I think a lot of the things we'll do here are going to stick for quite some time and of course if you need any specific section reference or lesson reference check out the course on my website and if you need any help with installation of certain items just go into the guides here and it'll show you how to install python on Mac or Windows and then the actual code itself is going to all be available on GitHub at this repo right here there will be different branches that represent the different sections of this course or the different lessons of this course now for a little bit more of an in-depth look here you definitely want to download the latest version of python I recommend downloading 3.11 you might as well start using the latest version if 3.12 or 3.13 is out by all means try those just check them against the version of Django that's out and and whether or not it's actually supported for the latest version of that more than likely 4.2 will be supported long after the version we're using here next you might be wondering why are we even using node.js at all now what nodejs will do is it actually allows us to run our Tailwind commands so with Tailwind it actually by default doesn't have much CSS in it you can add a bunch of stuff to it as you see fit the Tailwind application the node.js application will watch HTML Pages or JavaScript Pages for changes that will occur or most likely will occur while you're developing it's really really cool we'll see this in action soon but that's why you need the JavaScript the JavaScript part will watch for Tailwind changes but then it will also build the actual output CSS file that we need to use CSS doesn't have a default way to do this so we need node.js to be able to install the Tailwind tooling for that Visual Studio code has a bunch of plugins I'm not going to go into all the details of that but I do recommend this one you can use anyone that you like out there next the version of Django of course on Django project.com download I've referenced the 4.1 that's what we'll use in this course because 4.2 isn't officially out yet I know that the static file configuration is going to change slightly from 4.1 to 4.2 so that's just something to be aware of those changes I intend to put on the GitHub repo for this project when it makes sense to at the time of this recording it doesn't make sense too now if you're still using Django 3.2 by all means use it you can use it for a long time going forward and just because there's no longer support for that version does it mean that you can't learn from that version still because so much of Django that happened 10 years ago literally still exists in Django today yes there are changes in a lot of configuration and support for certain things but they're they're mostly minor because the Django project is so so good certainly they become major when you're putting them into production or you're um you know you're trying to do something that just isn't possible on an older version so it definitely can get to be a major pain but the actual things that have changed in the last 10 years isn't crazy um anyways so the code itself like I said I'll have a bunch of the code in here as different branches so you'll be able to review it check it out both in terms of git but also on github.com you can actually see the different changes and all that as well from lesson to lesson so with that out of the way let's go ahead and actually get this project started foreign so now we're going to go ahead and create our main project folder and a virtual environment now I'm going to do this using my terminal but you can use vs code and of course if you're on Windows you'll use Powershell so in this case I'll go ahead and navigate into where I want it to be I'll go ahead and do make dir mkdir-p tilde slash Dev slash Django Dash Tailwind CSS now what this Dash p does is it'll make sure that Dev as a folder exists as well as this folder this is true about subfolders as well and then I'll see the end to here just navigating in and I'll list things out and I'll do PWD or dir if you're on Windows you'll actually be able to see exactly where you are what location you're in just to make sure that you're working off of this now for those of you who do this with me all the time I I apologize for the repetitives but setting up a virtual environment is so necessary that we have to do it pretty much the same time every time and we need to make sure that everyone is on the same page so hopefully you have python 3.11 installed let's do dash dash version and just verify in my case I do and this is the latest version of 3.11 I also have other versions of Python 3 installed as well so I python 3.10 I've got python 3.9 right you can absolutely have all these versions installed as well at the very least use 3.8 and above like I've already mentioned but I'm going to go ahead and stick with python 3.11 and we'll just see if this ends up working I know for a fact that some Django packages do not work with 3.11 yet but that's now when I'm recording this it's also possible that they were updated now Django itself works with 3.11 but some third-party packages do not I think there's one related to celery that doesn't so you might have to use 3.10 for the time being but switching virtual environments is actually really easy to do because of what we're going to set up so we're going to go ahead and create our virtual environment with python 311-m the virtual environment package so this will be the command and then ve and V of course is the virtual environment name if you're not aware of that already that's just one of those fundamental things that's built into python now of course you can use other virtual environment managers there's something called poetry there's something called pip EMV to me venv has been the most reliable among all of them in the various versions of python and it's the easiest to communicate with students so that's the other part that makes a big difference for me but yes there's ways to improve how you work with virtual environments that's not something that's in the context of this particular project but anyways I'm gonna go ahead and make that now of course if you're on Windows and you went through my installation process you would have been doing something like this and then python.exe and then Dash m v e and V right so hopefully you already know that if you're on Windows uh but for the rest of us that are not on Windows we should have our virtual environment in here if you are in Windows you will have the virtual environment as well and then we'll do Source vemv bin slash activate and hit enter and of course that activates our virtual environment for us on the terminal now if you're on Windows it's just simply VMV scripts slash activate also very simple you just change Bend to scripts and then you change the path slashes and you know you Source that's it really simple but now from here on out most of the commands should be the same now one of the things I do want to have is I want this nvs code so to do that I just do code.period and that will open this project up or this folder up in vs code now if you don't have the vs code command line tool open it's not that big of a deal just open up vs code and then into a new window in the file explorer opening you go to Open folder and then you navigate to the folder you're trying to use really simple uh not that complicated hopefully you all know that um anyway so let's go ahead and save this project here just like that and then I'll go ahead and leave the requirements for the next one but at this point I have a virtual environment in here but you know vs code isn't activating it by default this is something that it has inconsistent behavior in my experience with vs code in other words my virtual environment is not activating by default okay so that's how you can activate it you just need to be aware of the command you need to run in order for that to happen now if you're not aware you can also just use a direct path to the version of python that you're using in that virtual environment as well and of course if you're on Windows it's most likely I believe it's scripts python.exe Dash version something like that so yeah it's pretty cool so now that we've got this let's go ahead and actually get the requirements going and install Jane foreign before we jump in let's go ahead and do a little housekeeping here and that is this get ignore and read me now if you're not aware this is just files that are for GitHub and git so if you go on the GitHub repo now you actually can see some of the details and some of the code related to this project that's where those files came from they came out of nowhere seemingly and then also at the very bottom here uh there's going to be something that says four dash end that is related to this video itself so that's what the state of the code is going to look like at the end of this one okay so with that out of the way let's go ahead and actually install Django and then set up our Django project now I'm going to go ahead and create a new folder called SRC this is typical as to where you would store your Django project in a folder called SRC this is actually typical for a lot of code not just Django of course so in here we're going to go ahead and create a file called requirements.txt I'm also going to go ahead and create just simply notes I'll do pip-notes dot MD and I'm going to paste in three commands to install pip okay so each one of these are just simple ways to use requirements.txt with Pip and then you also might consider checking out a package called pip tools this is outside the context of this one but it's a really cool way to manage your requirements inside of virtual environments or in all sorts of places but the general idea is we need to actually create our requirements and then install them these are the three recommended methods if you are going to use requirements.txt so of course we need to actually do Django and we want it to be less than 4.2 so go ahead and save that and I'll run the installation like this so with this open if I open up my terminal here actually if I open up a fresh terminal here it actually activates the virtual environment and that's because it says pip requirements down at the bottom there which is great so it's actually vs code is intelligent enough to know that hey these are python requirements so I'm going to go ahead and activate the local virtual environment that starts with v e and V I think there's other names that it also supports but that's the default one anyway so with this in mind I can go ahead and now do my installation here now this command is running in the root of the entire project here right so if I look here it opens up into the root of the entire project folder not necessarily in the SRC folder which is why these commands even exist so realistically inside of SRC here it'd probably be better to just have it like that but having these different methods is important to know about because you don't want to use the wrong version of python you don't want to use the system version of python or the system version of pip using the virtual environment version of python is ideal for the reason that it's the correct version of python hopefully and then also the version of Python's pip like it's built into it that's another reason for that nevertheless we now have Django installed according to this right here and so I'm going to go ahead and create our Django project now so let's go into SRC here and I'll go ahead and do Django Dash admin start project and I call my projects CFE home every single time I call them that that's where my main Django configuration will end up being now every once in a while with some of my older projects I call it a different name so if you are reviewing code on my GitHub repo sometimes it is the actual Project's name I've been going back to just using CFE home because it makes sure that all of the projects themselves the configuration for them are in CFE home now since this entire series is about configuration that's actually kind of important so basically wherever settings.pi is that's the main Django configuration file or folder rather as you might be aware of and then we also have urls.pi in there as well as wsgi dot pi and asgi.pi as well so those configuration items that makes this the configuration folder and where we're going to be using this a lot right so at this point we have Django installed we have a lot of things set up now we need to actually get the process going of handling our Tailwind CSS folders so actually setting the stage for our static files and all that now the reason I'm not going to be building out a full Django project is because this is about integrating the two right this is really just about how do we set the Bare Bones to be able to use Tailwind in Django let's keep going foreign now we're going to go ahead and create a folder for our output static files from Tailwind now this is also for any other sort of static files that we might need let's say for instance if you're going to be using vue.js and you need to build some of the final JavaScript files those would also go in this same location now generally speaking this is just good for development environment if you go into production just check out Django storages and then when you run collect static it will actually go into S3 buckets which is something we're just not going to do in this one because we're not going into production but if you want to see how that process works let me know in the comments and we'll take a look at it but the it's really really simple on how we're going to do this so inside of SRC here I'll go ahead and create a file called Static and then inside of the main project folder here we're going to go ahead and say local dash CDN and then inside of there we'll go ahead and create static as well with that local CDN I'll actually add this into might get ignore here because I'm just emulating what a actual production CDN would look like or a production S3 service would look like either one but the idea being that this is just emulating what production would end up being so with this in mind I now have two destinations for my static files the first thing that we need to do is go into settings.pi we're going to navigate down to the static URL of course all of this is referenced really well inside of the Django documentation but let's go ahead and get it done so first off is the static files underscore durs this is a list of all of the places you want to store static files in our case we have one place it's this right here so what you could do is you could copy the relative path and that's going to be an SRC static this is the relative path to the root of the project itself to the Django Dash Tailwind folder this of course is not great now another thing you might do is actually copying the full path also not great because if I send this to you that's not gonna work anymore right so what we do instead is we use the base dur right so this base stir this is using pathlib what it actually ends up resolving to is this same exact thing can be treated like this those are actually the exact same paths except when I send it to you it's going to still work it's still going to go to the same path as well so if you're not aware of that that's just the the idea behind pathlib it's fantastic it's a really really good tool the next thing is we're going to do static and root this is going into where we want to store these things for production not local development but actual production so this is actually going to be very similar to this but instead of the base directory where Django is we want to go one level up which would mean baster Dot parent so this is actually how I can get this path right here and then I can just use slashes for all of the other paths which in this case it's local CDN pathlib is fantastic I really really like it but of course there are other ways on how to do this one of them is using OS path which I don't have right in here right now but OS path.join you will see this from time to time as well and I believe pathlib and Os path can coexist at this point with the Python history but if it doesn't you can just put that into an SRC or Str R whether a string and then it will give you the same exact route this is the old way of doing it pathway lib is the new way of doing it okay so that's only part of the configuration we need for local development the other part is going to be actually serving these static files so we only want to do this in debug mode we only want to do this in development I'll say that time and time again but the idea here is we do from django.com we're going to import settings so this settings we want to look for is if settings that debug so basically if it's in debug mode uh then we can do what we're about to do so do not do this in prod basically we'll do from django.conf.urls.static we're going to import static you're like how do I possibly remember this well you don't you go into settings up high if you go here and you open this up you scroll down a bit what you're going to find is this right here that's what I'm doing literally that so I I'm more or less copying and pasting so instead of URLs again the reason I just put this in debug is because that's the only time I want to use it and then I'll go ahead and use the static URL which was the default one right here this is the URL it's going to serve the aesthetic files on from the static files dirs folder or more specifically from the static root folder which is what this is doing this document's root here so we just do URL patterns plus equals to all of that now I realize that I've probably already told you this stuff before but it's still important to implement them and make it work if I haven't told you these things before this might have gone a little bit faster than you might expect and so check out try Django any of my trijango series because I go into a little bit more detail here although I don't know if there's much more detail to be had other than just to test it out so if we do python manage.py collect static hit enter I see that 130 static files were copied to local CDN static this of course has to do with if we go into local CDN static and admin that's the Django admin that's coming in here inside of SRC I have a blank static folder in here so if I went in and did let's just do my own I'll just say custom and you know input.css or rather let's call this custom.css as well and then just did like H1 and color being red this is just for illustration purposes I won't actually use this I collect the static again it's going to ask me if I want to overwrite these things this is okay at this point and what it does is it overrides the admin but it also brings in custom.css so as you might imagine this is essentially what we need to do with Tailwind we need to have some sort of input CSS file and then also some sort of output CSS file all go in inside of Django and then that will then eventually be collected to either the local CDN or the production one and so that's what we'll still need to do but before we get there there's another thing that we need to configure so let's go ahead and take a look at template files with Django now now we're going to go ahead and configure a hello world home page for our Django project which means we need to configure our templates and create a couple templates now to do this we are going to jump into settings.pi and we're going to do something very similar to what we did with static files and that is go into the templates here and just do base dir slash templates okay inside of SRC we'll go ahead and create templates and then we'll create base.html and in this case I'm going to go ahead and copy and paste something so you can easily recreate this or you could go into the GitHub repo and find the branch for six dash end and you'll be able to copy and paste it directly from there but the general idea is of course I need a base template a base HTML template so I can you know inherit from that and so in here I'll go ahead and create something called pages and then I'll go ahead and create home.html and this of course is going to extend from base.html and then we want to replace this block content in here with whatever we want to say so something like Hello World okay very good and so with that in mind let's go into CFE home again and just create views.pi and they'll do from Django dot shortcuts we're going to import render and then we'll go ahead and do Define home view or home page view and it's going to take a request and it's going to return render the request itself and then the template which is Pages slash home.html and then we'll use empty context at this point so with that in mind and my URLs back in here we'll go ahead and do from dot import views and then I'll go ahead and wrap in an empty path for my home page view so views Dot home View and we can also give it a name if we wanted to okay so with that in mind let's go ahead and run the server and just have a look python manage.py run server and I do have migrations that I would need to do but for now I'll just leave it at hello world just like that okay great so we've laid the foundation to modify this quite a bit with Tailwind so of course we need to actually create that Tailwind application now before we can actually make any real big changes here so one of the things with base.html I do have this load static here which is something that I may or may not do in the long run or what I also might do sometimes is have something like this where I have my CSS in an external file right so I want them potentially in both or be something like link real equals to style sheet and then href is going to be some sort of static file here so if I did Static and I do have a static file in here of custom so let's do custom and CSS or rather custom slash custom.css and then we close that off and then in base I can actually include it right so we include and there's going to be head css.html save that and if I refresh in here I now see that those static files are actually loading so at this point I should have all of this working correctly just like this now the reason I have html.css as its own template and I also do you know js.html as well is really just so I can see at a glance really quickly what static files or what CSS files I'm loading in without having to open up base.html and do a bunch of scrolling which you potentially could have it also keeps based on HTML really really clean and concise and with this include tab I can use conditional rendering of some of these things as well so if I have a dashboard that uses a lot of the same sort of CSS but not all of the same I can still use the same CSS file with some conditional rendering in there as well with how Django templates work now of course I'm not going to go into that detail with the templates if you want to know about that let me know in the comments but for now let's go ahead and actually start getting our Tailwind application going I'm gonna go ahead and start our Tailwind side of this project which means that I actually am going to use npm the node package manager to install Tailwind locally to this project so npm actually does a really good job of managing development packages or local packages right python we have to use a virtual environment manager npm who sort of has one out of the gates and that's node modules as we'll see in a moment so we'll go ahead and do npm install Dash capital D and then Tailwind CSS and we'll hit enter and this will create this node modules here notice that mine is already grayed out so if you are using git make sure you do not commit these node modules because they are huge look at just by default I already have a bunch of things that are in here just with one package so that is something we don't want to pass around we also have package.json and package.json lock which have to do with the Tailwind version and the thing that I just installed so something you'll often see with npm packages is this filled out a lot more than what we've got here the nice thing about doing it the way I did is it just really concise to what we need to do in this package but it's kind of missing some things that we might want in the long run one of those things would be a Scripps declaration right so it's very often that you'll have a script in here and I'll just say Echo something like uh we could do hello world like that and then I can run npm run Dev and then just Echoes out hello world right so we can actually run all sorts of commands so this npm is a really nice way npm run especially is a really nice way to just run one-off scripts now me personally since I have a Mac I use a make file all the time to run off these scripts but we'll actually build out this script to run with Tailwind which is the point so with Tailwind installed I can actually use another tool called npm or MPX so MPX is a way to execute one of these packages so if I did just MPX Tailwind now that it's installed I can actually see all of the things that you might want to do with Tailwind so here's the usage right here this is absolutely what I'm going to want to use up here so we've got Tailwind we've got an input so let's get rid of these brackets here we've got an input we've got an output and then we have the ability to watch it and there's other options as well but those are the main ones okay so we can also shorten input to just Dash I we can shorten output to just Dash o which is incredibly common but also very obvious right here watch is great for development environments it's going to watch for changes which we'll talk about in a second but the idea here is we want to have this command running but we actually haven't even started our Tailwind project yet so what we've got here is Tailwind in it I'm just going to do a very very simple one of Tailwind in it Tailwind CSS in it but of course I can't just call Tailwind CSS because it's not on my command line anywhere so I have to run MPX Tailwind CSS and that will actually just create this Tailwind config file now that's this right here I could write this manually right I don't actually have to use Tailwind in it to do this but there are some other options for Tailwind in it that are available to you which is something I'm not going to cover right now but the idea being that we now have our configuration and we have a package the last part of this that we really want to do is really setting up our input and output okay so the input itself is going to allow us to declare which Tailwind features we want and some of the shortcutting of things that you might do in the future I'm not going to go into all of the configuration for Tailwind because there's a lot to it instead I just want to show you some of the fundamentals so inside of static here we're going to create another folder and I'm going to call this TW as in Tailwind I actually usually have this in as SRC but to keep things really simple and clear I'll keep it in as t w and then in here I'll go ahead and call this Tailwind Dash input.css so that is the file that I want and I'll actually use a relative path this time so I'll go ahead and paste this in here and now I've got this relative path that goes into SRC here into static into TW and then tailwind and then the output is the one that I actually want to reference on my Django project so in this case I'll go ahead and do static and I'll go ahead and just say my output being in a CSS folder and this one I'll go ahead and copy that relative path and we'll leave it again as just simply output right so I'll go ahead and or we could call it CFE home uh UI or something like that too okay cool so now that we've got this let's go ahead and give it a shot I'll run npm run Dev okay so I actually don't have an input at all right remember I didn't actually put anything in this input but the tell win command did it for me fantastic CSS I also don't have any output because well Tailwind doesn't know what to look for in terms of output that's something we'll still configure but I can add one thing to this and that is to the Tailwind input and that's some of the base components in here so the base components are definitely available and it's very obvious inside of the installation process of course we've already done a bunch of these things in here but you would grab this right here and you would just paste that in you save it notice that when I saved it it automatically changed everything and including my CFE home CSS right so it gave me a bunch of boilerplate stuff relate to tailwind and clearing out all of the previous Styles and all that which is fantastic that's exactly what I wanted in terms of actually having Tailwind so you could absolutely customize the CSS as you see fit but we really want to do is not customize things just yet instead use some of the built-in features that Tailwind has so we need to implement how to actually create a home page and how to monitor for changes inside of our Django project as well so that our final CFE home UI actually does look correct so let's go ahead and do that in the next one all right so now let's talk about the magic of tailwind and how great it is by really just changing some minor things for this home.html first off I'm going to create a div in here and I'm going to put it around my H1 I'll go ahead and add in some padding and I'll do p of 10. so p-10 this will give me padding all around the inside of this element as you'll see shortly I also want to do text red and we'll say 500. what I'll also do is hover text white and then hover BG let's do black okay so now I've got all of these classes I want to use from Tailwind in order for Tailwind to know about this template I have to go into Tailwind config inside of content here and I need to add in dot slash Source slash star star star star dot HTML now a little bit more flexible here would be doing the curly brackets HTML and JavaScript what this line right here does is it's going to look inside of this SRC folder in any folder path that's what these two do is any folder path so literally any file in here with any file name it's going to look for HTML and CSS in there so you can make this very explicit or just sort of general like this where it just matches a lot of files it's basically looking in this SRC folder for any HTML or JavaScript file and it's going to go ahead and update our CFE home UI CSS related to those things so since I created this and saved it my actual command for npm run Dev already rebuilt it when I say it already rebuilt it that means that in CFE home ui.css if I scroll to the very bottom I actually see these things in here everything that I just declared I've got my P10 there's my padding of 10 which is actually 2.5 Reams and then I've got text red of 500 what do you know hover and all this stuff fantastic this is why I really really like using Tailwind for this exact reason so now that I've got that and I want to take a look at my home page the last thing of course is to make sure that I'm using CFE home uicss so in where I'm loading in the CSS on my Django project I need to bring this one in and that's just simply CSS and then CFE home Dash ui.css so we save that I don't think I need to change anything but when I do save it it does rebuild it and so if I refresh in here now check that out I I mean I have it where now if I hover over that div it changes colors yeah the pointer doesn't change because a you know a lot of reasons but it's definitely changing colors so you can actually go into the Tailwind documentation for text color and you can see all of the different text Hill is for red fantastic how about backgrounds well do a quick search for background uh and not seeing the backgrounds that I want so I'll do background color what do you know I go in a background color here's all of the background colors you can use so let's say for instance we want the hover color to be BG gray uh 400 like I saw there I've got this hover block here so hover colon is how you can actually declare this is the state or this is the class you should use on the hover element and you have to do one at a time and so we come in here and we change it to BG gray this will rebuild and then I come back into my project I refresh and now when I hover over it there you go and if you need to change the cursor right so if we did the cursor we could do a quick search for cursor and here's all of the different cursors that we can use right so it even shows you an example right there so cursor pointer what do you know you want it to be a pointer you want it to look like it's clickable save that and come back in here refresh and now it looks clickable it's certainly not clickable but it definitely looks like it right and the terms it's not clickable because I don't have any JavaScript on there or it's not a button or an anchor tag and so now we actually have Tailwind fully integrated it's definitely fully ready so we can we can obviously build out a little bit more we will to just get a better sense as to what's going on so of course the tricky part of Tailwind is actually building out all of the components you might need going forward for your entire project right so I do recommend that you maybe go a little bit deeper into learning about all of the things with Tailwind prior to fully committing to this but even if you use it with another framework you you can get away with it by these things right here now if you're using bootstrap bootstrap does have support for certain padding so maybe that will have an issue for you so if you wanted to just default to the Tailwind padding you would just put Tailwind below the bootstrap one so if you put bootstrap up here you'd put the tail one right below that the output file and then boom you're Off to the Races so what I actually want to do to kind of finish this one out is to finish off this landing page and have it actually look like a proper like Hello World welcome to this project foreign is all about integrating Django with Tailwind it's not necessarily meant for you to go in depth with Django or in depth with Tailwind however this one I hope convinces you that you should spend more time using tailwind and it has to do with some of the built-in features that Tailwind has okay so one of the things I want to do is I want to Center this hello world now one of the ways I could do this is by coming in here first off I'll do H screen so this is going to make this div the size of the screen itself at least for the height so height is going to be that size next we're going to go ahead and do justify and Center okay so if I do those and we Refresh on this home page nothing seems to change so if I bring it in with flex save it and then refresh again now we've got it in the center so there's just this element is Justified right in the center now if I wanted in the absolute Center I can go ahead and do items Dash Center save that refresh and now it's in the absolute Center okay so not a whole lot to get an absolute Center item now for those of you who are familiar with CSS and this issue it is not a trivial issue for some reason it keeps on being a challenge to make this single thing happen now that's of course not it that's not all I want to do here what I want to do also is say to let something like text white and then we'll just do BG and blue and 800. so we save that we refresh it here cool so now I've got a sweet background with a nice color um but the thing is I want it to be a gradient I actually wanted to sort of like go from a lighter blue to a darker blue and that's also pretty easy I'm actually going to move this blue to the front of this class here just so it makes it a little easier and to create this as a gradient we can just do BG Dash gradient Dash 2 Dash R so it's going to be from left to right and then we can start from BG or the blue color and then we can go to Blue let's say 900 or 800 whatever I'm going to bring this number down so it's going to go from light to dark so we save that and we refresh and what do you know that might be a little too light so let's change it to like 400 we save that and there we go so we've got a nice gradient going on here this this to me is like so so cool and of course if I did the gradient to the bottom or to B I get this gradient if I do it to the top it reverses it if I do it to the left it goes the other direction left as an L right uh really really nice now I can also add another gradient element in here so in the middle I can also do via Blue and let's say 300 so now it's going to kind of come in and out and there we go let's change these numbers a little bit more so it's not as light there and there we go so now we've got this other kind of gradient pretty cool and if I do to the bottom again it will sort of give me that same sort of element here now what if I want a little bit more robust of colors here and I want this to be a little bit bigger so first off to make that bigger it's as simple as doing class text Dash XL right or I could do 2XL or I could do 4XL right and then I can also make it bold with font bold save that and there we go great now let's go ahead and go back to this color and use different colors so if we do a quick search for colors we've got all kinds of colors that we can use in here so I'm actually going to scroll on the sidebar here and navigate into customization of colors and so what we see is all of these colors in here maybe you scroll down and you're like oh I really like sky blue instead of just the regular blue I want this this blue here and so you come in here and you do Sky and Sky you save that you let's say refresh in here and maybe it's rendering here but maybe it's not so if yours didn't render what you need to do is come into Tailwind config you bring in the const of colors and you put this equal to require and this is going to be Tailwind CSS slash colors and in our theme what we can do is we can bring in colors here and I can say sky is equal to colors.sky so I can refresh in there or if I change if I want to change Sky to like violet for some reason oh let's put a comma there so it's correct I can change it to Violet so just like that I just changed that default Sky color I want to leave it in as sky and maybe I want to have Violet in here still right so colors dot violet save that and so then I could come back into my home page here and let's change this to Violet 400 and now we've got a different kind of look here and maybe one we wanted to go to Black instead of that color and to let's go ahead and go into the colors and make sure that we can even use black in here looks like I don't have black as an option so I'll just use stone for black so I'll do black equals to colors.stone and then in that case I'll do black 900 or rather let's just call it Stone 900. so back in here bring it in we've got more colors we refresh and there we go so I'm not sure if these colors look that great in general you'd probably want to use different kinds of gradients but the point is how easily it is to customize all of these things so that is something I really like about these colors like colors alone is like one of the reasons to use Tailwind right you've got all of these built-in colors that you can use just like we saw and then you can also add in your own colors right so I didn't show you black but if I actually brought in Black in here and did the hex color for black right so we did zero all across the board let's change it to now to go to Black we save that refresh and there it is now it is is the black that I just set and then if I want the CFE color right so that is absolutely something you might end up doing not necessarily the CFE color but your own color and you do two CFE and now it's actually going down to that color I mean like how fast that happens is phenomenal now I realize I'm flipping back and forth and going like maybe too fast for a lot of you but the idea here is we can really customize this and this is just a fraction of what we can customize inside a Tailwind but the thing one of the things you'll probably do first is trying to get all of your colors done correctly and what's cool is whenever you see something like from Sky 600 you can put your own color in there and have your own color numbers right so in here we can also have our own let's say for instance my CFE blue or something like that I can now come in here and do 100 being some variant of 007 CAE D or something like that I'm not sure if that's a good variant or not but we could come in here and then via CFE blue 100 and refresh and there we go so it actually does show me that actual color that I just added in here now again this is not necessarily something you would end up doing and perhaps you would call it you know something a little bit more specific to your project but all of this customization is well documented on Tailwind which is why you know I keep jumping back to the documentation itself um but that's it that's like the main part of of what I wanted to show you as far as integrating this and then of course like whenever you need to change something let's say for instance this text white is not working for some reason well we can bring it right down on here uh but of course part of the problem is the fact that the colors that I have here are fairly limited so if I did white and colors.white then I should bring that that white should actually come back and sure enough it did and same with this one colors and dot black also should come back and that's just a matter of experimenting with the colors that come in here you could also just set colors you don't necessarily have to customize anything and that will give you availability to use all of these colors uh except for the CFE ones all the custom ones that I just did so yeah it depends on what you are trying to do as far as the customizing of those colors now this is all to say that just because you have these here doesn't mean they're going to be outputted they're still going to be outputted when you use them now it doesn't necessarily mean it's always going to remove some of the old ones like if you are still using some of them I think it does but sometimes I've seen the caching issues that where it doesn't but as we see in here I don't see Violet anywhere so it's actually is removing ones that I'm not actually using any longer and so this text white I probably don't need it twice I come back and what do you know it's all back very good so I really really like Tailwind if you want to see more let me know and the next one I'll just chat about a few other resources that you might want to check out to get Tailwind into your Jango project even more fully hey thanks so much for watching hopefully you got a lot out of this one and more specifically hopefully now you're really interested in learning more about Tailwind there's a lot to learn so I don't think it's a trivial thing to jump into and it's certainly outside the scope of one single course to learn all of Tailwind in fact I don't recommend that you try to learn all of it instead I recommend you learn bits and pieces as you need them for your projects just like what we did here all I really wanted was to have some sort of landing page like this with Tailwind working and this is a good enough start what we did now one of the things that you will want to have most likely is stylized forms so if you go to the Tailwind documentation for plugins and you scroll down a bit to one of the plugins called Tailwind forms this is a plug-in that you can easily use in your Tailwind projects and this is how you set it up and then you would actually change a lot of your input values the classes is to fit with tailwind and there's also crispy forms CSS Django and Tailwind that's usually how I search it but we've got a crispy Tailwind package as well that I found to be pretty good when it comes to using Tailwind within Django crispy forms it's not perfect like there's still a lot of things that need to happen for it and as it says it's still an early stages of development which is a big part of the reason I actually didn't cover it now Django itself you can add in classes directly into forms and then all you would need to do is you need to update your configuration to check for those forms so I would add in a whole item in here for forms themselves that are just let's say dot pi and forms right I would do something like that to actually look for the classes that might be informs that pie the bigger that this is the more files that are in there the longer it's going to take to compile the file hopefully that makes sense a big part of the reason of course is the fact that well there's a lot of files in there so you'd probably want to be even more explicit about where things are located even within the templates and all that and maybe specific forms that you wanted to review as well otherwise it does start to take a long time and you're like hey why isn't the style why aren't the style showing up but both of those things are good the plugins as well as doing direct CSS as well as the Django crispy forms for crispy Tailwind I've actually had some success with this it's just early days in in the terms of development for that I think it's mostly because of how Tailwind actually generates the CSS for any given element so that's that's definitely one thing now the other thing if you're coming from on bootstrap like I did flow bite is fantastic there's a lot of really good things about it there's a lot of really good free stuff about it too that you can use right now that just gives you some of these components right there's even some Django setup stuff that I think is fairly useful to build on top of what we've did here and you should be able to just jump right into that as well but then there's like some dark boat support that's really super easy to use within Tailwind but but then mostly these components this is like why it really got to me all right so you look at a button they give you all of these different buttons with a bunch of Tailwind based classes it's just a bunch of examples for these things right and there's a lot more than just buttons of course as you can see right here including modals and all that so so flow byte has some JavaScript and some of its own customizing things that you might want to look at but that's pretty much it for the next steps in terms of Tailwind figure out how to use it with forms and then if you want to replace bootstrap you go into using something like flow byte I'm sure there's other things like Flow by out there I've just found this one and I found that it is incredible and they've got a great tooling for supporting uh you know developers and all that now tell when CSS also has some of its own components for user interface and all that these things aren't free and perhaps these are what you'll want to use as well so going to the advanced stuff you might be like Oh I'm not ready to pay for something like this the reason you would pay for something like this is it dramatically increases the speed as to which you can get this done but also gives you some best practices sort of built into these components when it comes to using Tailwind itself so thanks again for watching hopefully you enjoyed this if you want to see more things with Tailwind definitely stay tuned because I'm going to be covering it in more comprehensive projects and I'll probably reference this series when it comes to integrating Dean you know Django and Tailwind in the future so thanks again for watching and I look forward to seeing you next time [Music]

Channel: CodingEntrepreneurs

Views: 32,882

Keywords: django, tailwind, tailwindcss, bootstrap, npm, python, nodejs, django tutorial, django project, integration, python tutorial, frontend, backend, ui, flowbite, open source, styles, css framework, css

Id: lsQVukhwpqQ

Length: 56min 25sec (3385 seconds)

Published: Thu Feb 09 2023