Tailwind CSS Tutorial #1 - Intro & Setup

hey gang and welcome to your very first tailwind CSS tutorial now just really quickly before we start the tutorial for those of you who want to support the channel and join the gang officially you can do by clicking that join button right here is just in 99 cents or pence per month and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment you can also join by clicking the button right beneath the video if you're watching one now which I'm guessing you are it does exactly the same thing alright so now that's at the way let's get on with the tutorial okay then so what is tailwind CSS well basically it's a framework packed with utility classes which makes it really easy to quickly star nice-looking webpages now in that sense I guess you could say it's a bit like bootstrap or materialized CSS but it's also very different as well because whereas bootstrap and materialised and all the CSS frameworks give you fully styled components like cards buttons dropdowns and all that kind of just right out-of-the-box tailwind doesn't do that it's much more low-level and it gives you a ton of low-level utility classes to make your own components instead for example if you wanted to make a card in tailwind we might combine these different classes a rounded class to give it round corners a shadow class to give it a drop shadow p2 to say we want a bit of padding and BT white to say we want the background to be white so we kind of make these components ourselves based on these low-level utility classes but I hear you say doesn't that mean more work and isn't something like bootstrap then easier well yes and no you can easily make your own reusable components in tailwind so it's really not that much extra work to be honest and aside from that it also gives you a lot more flexibility than bootstrap and any other frameworks do as well and it allows you to customize your designs in a more unique way so whereas you can generally look at a bootstrap website and you can tell it's made with bootstrap or maybe look at a materialized website and you can tell it's made with materialise you can't really do that with its hell win because it's just made up of these types alone of all utility classes and it doesn't really have a set look or feel that is down to you so it's much less assuming that other frameworks as to how you want your page designs to look okay then so we'll be using tailwind to design this simple web page right here so throughout I'm going to show you how to work with typography and spacing how to make card components how to make button components and also how to make this fully responsive as well so it looks good on smaller devices as well as create this responsive menu at the top so all of this right here to create this I've not actually written any of my own CSS code or used any of my own custom media queries I've just combined the different utility classes that tailwind provides us with to make my own custom components and responsive design so before you start you should already know HTML and CSS tailwind is not a replacement for CSS you should already understand that first of all because tell wind assumes you have an understanding of CSS otherwise the utility classes that it provides are going to be absolutely meaningless to you and also we will be using tailwind with HTML pages so it's pretty essential you already understand HTML as well now if you know none of this then I've got an HTML and CSS crash course right on this channel so I'll leave the link to that down below you should definitely go and check that out first of all so for the rest of us how do we actually use tell wind in a project well typically we install tailwind via NPM that's the node package manager into your project and that means that you're gonna need node.js installed on your computer as well so that we can use NPM which comes along for the ride now don't worry if you're new to node or you've never used node we won't be doing anything with it except installing tailwind and I'm gonna walk through every step of the way with you as well it does mean though that if you don't have it installed on your computer you're gonna need to download it and install it and you can do that by going to node.js OGG and then clicking on this button right here now you may already have it installed on your computer but you just don't know about it so to check I'll put up some kind terminal I'm going to open up command prompt and then type node space - V and press Enter if this gives you a version number then you have node installed you can see mine is version 14 point 1.0 so I have installed if you don't see a number go ahead and click on this button to download it and go through the installation steps to install it on your computer then try running this command again node - V just to make sure it installed correctly so now we've done that I'm going to navigate into a directory where I want to create a project so I'm going to say CD change directory and going to documents then I'm gonna see the into a folder I've got called totes and then I'm gonna create a new project right here a new directory so I'm gonna say mkdir to make a new directory and I'm gonna call it ninja food that's the project we're going to be creating then I'm gonna go into that folder by saying CD ninja food and I'm going to open up my text editor vs code in this director it by saying code and then dot for the current directory so I'm going to be using vs code for this project you don't have to use vs code you can use whichever text editor you want but this is a really good and completely free text editor and I would recommend downloading it so I'll leave the link to the vs code website down below so you can download it as well if you wish plus there is a nice tailwind package that we're going to install later as well that it's going to help us with tailwind development so then now I have this folder open first of all let me just zoom in a little bit the next thing I'm going to do is open up a terminal right here and go to new terminal so the first thing we're going to do is create a new package JSON file using NPM and this is why we need node installed because NPM comes along for the ride when you install node so to do this we're going to say NPM in it and then - yes - fill out all of the different options with the default values and we can see now this package Jason now we need this to keep track of our dependencies that we install and one of those dependencies is going to be a tail wind CSS so let's install that I'm gonna say npm install tailwind CSS like so and press enter and it's going to install this package for us into our project right here and when it's done it should appear inside package JSON as a dependency so now that's finished down here we can head to package JSON to make sure it's installed correctly we can see the dependencies list right here and tailwind is one of them okay we also see this node modules folder right here that is where tailwind is being stored and also the different packages that tell wind depends on now we don't have to go into node modules ever or edit any of the files in there that's just where the package is being stored so now we have a tailwind installed we can use it inside our project right here now we can use tailwind on its own or you can use it as a plugin with post CSS now to avoid any assumption that you're familiar with post CSS we'll be using it on its own so how do we use it then and how does tailwind actually work so when we use tailwind we create a source file where we import all of the tailwind course styles and functionality and then we can also write our own CSS if we want to inside this file using tell when features and syntax as well then we use tailwind to process that source file into a vanilla CSS output file at Build time with all of the final CSS rules inside it and then we can link to that CSS from our HTML page so then every time we make some kind of change to this sauce CSS file we'd have to run a tailwind script to process that into a new output CSS file now that might seem arduous but the good thing is is that with tailwind we mainly use utility classes inside the HTML file itself so we only rarely have to change the source file the sauce CSS and then reprocess it into the output file okay then so let's start by creating our source folder and our public folder and remember our source folder is where our source files are going to go so the CSS that we write with tailwind and the public folder is where our final output CSS is going to go after tailwind has processed it and it's also going to contain our HTML files and maybe any front-end JavaScript as well so that public folder would be the thing that is eventually deployed to a web host on the Internet so let us create first of all the source folder and let us now create a public folder and now inside source I'm going to create a new file called styles.css now inside here we have to import the base functionality of tailwind and if we have a look at the telling docs it shows us how to do this down here so we have already installed tell when CSS using NPM we did that a short while back now it's saying we need to add these three lines to our CSS the source file so I'm going to copy those and I'm going to paste them right here so this is a tailwind directive and it's just basically getting all of the functionality forest from tailwind so the base the components and the utility styles so now we've done that we could process this file through tailwind so that it spits out a final output file inside the public folder so what I'm going to do is go to our package JSON file right here and in this section we're allowed to register certain different scripts that we can run it down here in the terminal so that's what I'm going to do I'm going to delete this test script right here and I'm going to replace it with one called build - CSS because that's what we're going to do we're building this CSS into an output CSS file using tell wind now you can call this what you want it doesn't matter but this makes sense to me okay so this script right here is basically going to use the tailwind CSS package by saying tailwind CSS and then build and then we say where the source file is well it's in the source folder the forward slash styles dot CSS then we use dash and O to say where the output file is going to be this is the output flag right here and that is going to be inside the pub folder forward slash styles.css now it doesn't matter that this thing right here doesn't exist inside the public folder yet when we first run a script and tell when does its thing it processes this file and it outputs a new file for us so let's save this and try running this down here in the terminal now the way we run a script in the terminal is by just saying NPM and then run and then whatever the script is called in our case build CSS so build - CSS press enter and tell wind is going to process that file for us and output it in public forward slash style.css okay so there it is this is the output file with all of the tailwind utility classes inside it alright so we could use those inside our HTML file later on so then whenever we change this file right here if we add our own styles or use different tell wind directives later on which we will see we're gonna have to reprocess that every time we change this so it updates this file over here but again we won't be editing this file that's often because mainly we're just going to be adding tell when utility classes to our HTML elements but occasionally we will commit him anyway now we have this process in place next up we can create our HTML page and we'll do that in the next lesson but finally I just want to show you where to find all of the course files for this series so because I'm a super ninja I have created course files for every single lesson in this tutorial series and they're on this github repo right here called tailwind tutorial this link is going to be right down below in the description so I've created code for every different lesson in this tutorial and if you want to see the code for a specific lesson you'll have to select the lesson branch for that lesson so for example if you want to see code from lesson 5 then go to the branch drop-down select lesson 5 and you're going to see that code right here ok so there we've got my friends that is your introduction to tailwind I really really hope you enjoy these video if he did my friends do not forget to share subscribe and like that really really means a lot and I'm gonna see you in the very next tutorial [Music]

Channel: The Net Ninja

Views: 194,601

Rating: 4.9628482 out of 5

Keywords: tailwind, tailwind css, tailwind tutorial, tailwind css tutorial, tailwindcss, tailwindcss tutorial, tailwind crash course, install tailwind css, install tailwind, how to use tailwind, tailwind vs bootstrap, tailwind introduction, what is tailwind, tailwind node.js, tailwind node

Id: bxmDnn7lrnk

Length: 13min 40sec (820 seconds)

Published: Mon Jul 06 2020