Web Design with NO CSS? TailwindCSS Crash Course

Key Takeaways

today we're going to create this layout right here which is fully responsive without writing any CSS before we begin to when to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my CSS tutorial but you could watch this full CSS course at skill share go share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up hey everyone Gary Simon of course at row so today we're gonna take a look at something called tailwind CSS all right and it is a utility first CSS framework for rapidly building custom user interfaces and of course I'm just you know copying this right from here from the official tailwind CSS comm site alright so basically what that means is it's instead of working within a CSS file where you have your you're declaring your rule sets with your selectors and your different declarations and your properties and values your styling your user interfaces within your HTML document namely within the class attribute with your different utility helpers or classes whatever you want to call them so we're going to create that layout that you just saw from scratch using tailwind CSS and I'm going to show you at the end as well as how to optimize it I within a more robust dev I'm production environment so that your CSS is as tiny as possible so yeah you're gonna learn a lot through this sort of like a small crash course today alright so make sure to subscribe if you haven't yet and let's get started alright so here I am in my console and I've created a folder called tailwind and I seed into it let's say code period that will open up visual studio code if you have it installed it's a free code editor from Microsoft that I need to update still and let's just get in index no let's get a source folder first and an index file and they're hit exclamation point enter for some quick boilerplate let's call this tailwind and I inside of here we're gonna reference just a couple things so first if we go to the tail win CSS calm and we click on installation as always when it comes to you know I the other CSS frameworks or JavaScript libraries we're able to either use a CDN right here or we can use NPM or yarn for a more robust dev environment so we're actually going to do both but first because I want to jump straight into teaching tailwind itself we're going to do the quick option which is just using the CDN option right here which will contain everything so the drawback of course is the file size but the positive part is the fact that we could just jump in without doing any type of setup work like down here but we're gonna do this at the end because I you're not going to want to use this in a normal production environment I we have this large unnecessarily large massive CSS file so at the end I'll show you how to refactor everything to make it drastically smaller alright so we copy that we're just going to put it right here and if we want any custom CSS we can do another link oops and enter and we could put in I don't know we'll put it in CSS and we'll just call it main CSS so we'll create another folder called CSS and inside of here we'll have a main dot CSS file alright great so I the purpose of the project that I wanted to create here I'm gonna get out Adobe XD I kind of created just a real simple layout initially for this and I did this just yesterday and I wanted to see can I create this layout here using tailwind so something roughly like this it was just a general idea right here okay so the way I'm going to tackle this by a teaching tailwind is not by going through every single section and trust me there's a lot down here as you can see I instead we're just going to I'm going to teach based on necessity by example by this particular layout example and you'll find that that's probably how you will use it as well I you'll start off trying to develop some layout and you're gonna find yourself all over the documentation until you can start remembering the different CSS classes that you're going to be using in their utility so I hate ctrl + make this bigger control be to grid of the sidebar and let's begin so the very first element that we have here is I this class for the body so class we want to make a not a white color but as something that's kind of like around this area just a very light color and we're going to say BG - gray - lighter alright and we're gonna save that control B and by the way let's go ahead make sure when you go to extensions you type in live server and install that it's already installed for me once you install it'll reload and then that way after we can right click and open with live server which launches a live server I unfortunately I already have it open let's try that again open with live server and there we go so we could see this background actually is not white if I hit control shift I to get out the dev tools we could see that I this BG gray lighter actually has this color code right here F 1 F 5 F 8 now where did that come from obviously we didn't define that CSS class but if we come over here I to colors they have an entire color section right here and these are all included I in the file to the the CDN file CSS file that we included so the way you specify a color here is based on its first putting in a BG so if I type in background for the search right here this will take us to the specific section where we can find define a background color so you find yourself using the the search a lot I we just simply put in as an example is just simply BG - and then the color that we want and then also you can go dark darkest darker darker no darkest darker dark and then just the color and then light lighter and lightest all right so they give you the color swatches as well so there's quite a bit that come out of the box so we used what was that gray lighter which is right well it's somewhere there it is this one right here so we can see that color code that was reference there so that's how we specify a background color very easy on inside note we'll see that when it comes to specifying a background image you will have to use custom CSS for that but we'll get to that in a second so next we have this sort of a two column this div right here and this div over here so let's get started with that so we're gonna have a a div class and this is parts very important we're gonna need to start with mobile first that's how tailwind CSS is set up it's it's set up for a mobile first approach and I'll show you what I mean in a second here so we're gonna say div class block I and we're also going to put in a responsive helper utility okay so what that means is if we want to define certain CSS classes that will only be attached for specific viewports then we can put in the viewport name so I ought to top my head you first have small and then you could specify one of the utility helper classes with after the colon or you could do a medium or MD for medium you could do LG for large and then you could do XL for I believe it's 1200 pixels and beyond so that's the way that works so we're using a mobile first approach when we say we want this to be a block-based element right here because the child elements the two div elements for two of our columns are going to stack on top of each other on mobile and then once we get to medium and up we're gonna change it to a flexbox display so the way we do that is MD and then flex hopefully that makes sense but you're gonna see if it doesn't make sense you see how it makes sense when you ate it in the browser here momentarily right now there's nothing to show so it won't make too much sense but although we could go and check it right now actually if I save it I if I come right here we'll see currently it's display flex if we drag this in we will see it's a display block right now so we'll see it visually though take place once we start to apply some aesthetics some things that you can see in the browser itself all right so I let's also put in a div class for our first column which is the Left darker blue column all right so div class we're gonna say BG so we're gonna first give it a color our background so BG we're gonna make this blue darker alright and we'll just leave that there for now let's do this second column which is the lighter column that will be let's see here we will put no background in the background for this one is just going to be the background of the page all right so for now I'm just gonna leave that shut and I'm going to put in our just in h1 element which is in reference to this and then also a paragraph element here I want to get the HTML first before we start adding all the the CSS classes from tailwind so let's just get that stuff out of the way h1 we're just going to put the tail when CSS tutorial also we'll pull it in our P element and that will be from Gary Simon of design course whatever save that over here we're going to have I in this part we do have just like a kind of like a placeholder for an avatar so I'm just gonna use a div class for that so we're just gonna have div and yeah we're gonna leave that with an empty class as well and then also we're going to have a paragraph and we'll say it is truly awesome man we're gonna have two of these by the way and we're going to just stick with one of them and then when we have all the classes we'll just duplicate it because as you can see we do have two of these things here but we just have the HTML just this one right there alright so that's all the the the actual HTML elements that we're going to need now from this point it's a matter of attaching all these various CSS classes based on how we want to style things up this is what it looks like currently so obviously we have quite a bit of work okay so the first thing I think we need to do which we make the most sense is wrong window there is this where we want to get this aligned this element right here all this stuff lined up correctly we want it to be a hundred percent of the viewport height and we want to this to be around fifty fifty in terms of the the column split so this is gonna be based on flexbox so it does it would be helpful to understand some flexbox i for this to work correctly so first we're going to say i let's see we're going to put in there's a bunch of classes that we're going to need here we're gonna start with this class right here now if we're gonna do the mobile first approach we should be in a kind of a more of a mobile viewport just so that we can get those classes out of the way before we start adding the these classes for the the responsive utility class here so I'm gonna move this over here just a bit so that we can have this thing in view all the time okay so the first thing let's see here I would like to add some padding this looks horrendous right here right so let's add some padding around the type all right so when it comes to padding let me get this out let's just type in padding and we'll see that that's not really too helpful there I know there's a section right here margin and padding I their system for setting this up is just so you start the class off with either a P for padding or M from our margin or a negative M for negative margin and then the side I if you want all of them it's just going to be you skip the side so you just do like for margin you would be M - and then space I'm - and then you know any of these numbers here and so you let's just add some I believe we're gonna add some padding right here and the way we'll do that is probably target the h1 element all right so the h1 element we're gonna put class we're going to say okay I lied we're actually going to apply the the padding on this div class right here the parent container of our h1 element I so what we'll do is after BG blue darker we want to have padding on the top in the bottom of this container so I want an uneven amount of padding on the top versus I in bottom versus the left and right so the way we do that is we put in padding for SOP and then we'll put in on the top and bottom if we just want to specify those two elements we put Y for the y-axis then we put a hyphen and then one of these options right here for the amount of padding I'm gonna go all the way up to 24 which is equal to 6 REM units so 24 we save this we have a fair amount now that have been added but now there's not enough on the left and right so we could do px which is left and right 8 there we go now this text color is really ugly so let's fix that so there's also a specific way to specify text or font color and we do that by starting off with text - and then the color that we want it to be so we'll say blue there we go and then we'll make this white so class equals and we'll say text - base actually no let's make that white here we go and I let's see what else we want to do we'll experiment just with this bottom part here don't worry we're gonna be adding more responsive classes because if we go though all the way out we'll see it doesn't quite look anywhere near what we want it to be so now in this section we'll have I sort of the same thing we're gonna have py and we're not going to put a 24 it's going to put 12 here alright and then we're also gonna have PX 8 there we go so now we're able to add whitespace very easily and we're also going to put in right here I I think I missed a class let's put div class equals blank we need an overall wrapper around these two elements there we go alright so this is going to be the white container so if you come out here this is this container alright so first we're going to need to make that background white so BG - white you can see it just barely and then next we will also make this in inline flex so what that means is if we come here we'll see we have an entire section if I can find it for flexbox and their associated properties alright so in line flex is one of the options here this is where it's kind of helpful to understand to already have an understanding of flexbox but these all these sections down here will give you all of the the utilities and then their class names that you would use to designate and define those CSS flexbox properties for alignment and inlay and laying it out correctly all right we're also going to put some padding so P - 6 there we go and we will also add I let's see here a rounded corners alright so we're gonna put rounded and full alright so actually I'm wrong about that rounded large so if they're kind of hard to see right here and if I come though over here and we type in rounded we have rounded corner section so we use some rounded large and it tells you what type of CSS property and value it's going to place on that so rounded full for instance we give you a circle which is what we need for the avatar alright so let's go ahead and do the Avatar section right here which is this empty div normally that might be like an image though an image element so what we'll put here is IBG blue we can't see it yet because we have to define a width and height and you'll see that as well first we're gonna put rounded full and then we're gonna put for a width the way you define a width here is width or it's W - and then we'll say 12 and then height - 12 because we want it to be a circle there we go so let's check real quickly in the docs for our width so it's actually under what is it sizing let me find it because it's just a simple section right here sizing right here so with we'll see we have w1 all the way through 64 which would give you up to 16 REM units and then also you can do percentage based values but if you want something to be at 50% you just put with - one half all right so I'm showing you the documentation just to show you know how you can teach yourself based on your needs because obviously this simple layout won't give you everything you need to know going forward so that's pretty good right there I let's also adjust this part this doesn't look very good so for this where it says it is truly awesome for that paragraph will say I we're gonna have some margin so we're gonna say margin top so MT - 3 so it pushes it down kind of near the center and then also we'll put in margin left 4 just to push it away from that avatar this actually should probably be for ya right there that looks better okay alright so now I let's go ahead and I'd say that's but let's say we want a shadow on this so there are also utilities for shadows for adding so we can add a shadow on this element right here so we'll put in shadow - MD for medium you could also put just shadow which is a much more simple shadow as you can see it doesn't I contrast as much we could also put shadow - LG for large I don't like that let's go with medium and then there we go alright so let's check out what we have so far see this is good for almost good for a you know like a mobile approach this however needs adjusted let's also Center this text by the way and that's very simple it's just simply text center and we'll add it to both of these elements there we go okay so now we need to make this thing responsive all right so once we get to this breakpoint right here is where we want to make this height a hundred percent and make some other adjustments I'm gonna adjust this actually this eighth value is making it sit right here which looks horrible maybe negative twelve on the margin left all right so there we go I've barely simple layout and look at our CSS file so obviously it's in just a matter of using those utility classes to structure everything right here so it it can get overwhelming looking at this though so that's why it's important that you would really want to structure your utility class names in order in terms of your base styles for mobile first and then medium and then act a large and then Excel as well all right so now I let's go ahead and try to set up a more robust dev environment for this where we're not using a CDN of sorts so first thing let's get rid of this top right here and we'll say this time I what we'll just leave that right here I'm not worried about that too much now let's go back to the installation section right here and if we're gonna use NPM you're gonna need nodejs installed and so you're gonna you know go to node.js work make sure you install it download it with the default options and then we're going to use this command in a second first so if we go back I'm going to go back here and I use NPM we're gonna run the in it - why command to create a package.json file with all the default options here so if we go back you know you're gonna see of course hit control B our package a JSON file so we're going to going to install our tailwind and run this command right here I'm just gonna copy that and this is going to be to install it in a node modules folder as a dev dependency and our package JSON file and there we go so we can also run this command right here NPM or MPX rather tail one in it and this MPX commands just going to look in our node modules folder and run Tailwind and with the init command and it's going to generate our tailwind a configuration file for us so we'll go back here and I'm gonna type that in and we're gonna call this just tailwind and I believe the file name I [Applause] is going to be dot J s so this will run through and there we go so if we come back to our code editor we're going to find tailwind J s this is where I by the way this file is only generated once you're free to modify this configuration file based on your needs now one of the ways that you can drastically cut down the size of your app is by removing any of these these colors that you're just not using in your UI and there's a lot of other things that you can remove here but that's not the ideal method really you don't have to touch anything in here for the purpose of trying to reduce the file size instead we're going to use post CSS I with a few different things such as CSS Nano I in autoprefixer and CSS Nano of course will help reduce file size automatically and will also use purged CSS which means it's going to get rid of any CSS rule sets that aren't being used based on what it finds in your HTML and so that's the ultimate way to drastically reduce the size of everything that you have going on so next if we go back to the documentation it's a pretty solid documentation here to help you understand how to get working so the next step is using tell win in your CSS so we have this J s file but we don't have the CDN anymore so we actually have to import our pre-flight as it's called our components and your utilities alright so feel free to read through all these comments I'm just going to copy this to this and we're going to create a I we're going to go back up to our main dot CSS file and we're just gonna import these I'm gonna get rid of the comments like that just like that you know of course at tell when CSS doesn't understand what that is but the the tailwind itself when it's ran will know what to do when it finds this alright so next if we go back to the documentation you could process your CSS now with tailwind so we can run this MPX tell one command once again and then we can just simply build and run the this command here with hype and see which we don't have to put that this is optional it's going to look forward till ngas by default but you also have to put in your output and I believe that's it so your input file in your output file alright so let's run that real quickly so our input file is actually in source CSS main CSS so if I go back to our console here it's in let's see here CSS and note it's in source CSS and then main CSS and the output file will just say let's see where we're currently looking at inside of our file here so if we go back to index.html it's looking for CSS main died CSS but we'll just make ours look for in a different folder or maybe called dist I will make this tailwind dot CSS all right so this is what we're going to want to specify right there like that so with any luck it will work and there we go so now we can go back we have our disk file and we have our CSS file quite large as you can see and that's because we don't have we have not yet integrated post CSS so I mean you know there's how many lines of code here 28,000 let's check the file size of this so if I reveal in Explorer this thing is 394 K of course it's not minified or anything but still it's gonna be large even after that process when we have all these rule sets in there by default anyhow nonetheless though this should still be working and it is as you can see okay so now let's use something like post CSS because once again if we go back here it's gonna give you instructions about how to use tailwind with post CSS also with webpack also with gulp the task runner I layer over a mix web pack on core brunch just a lot of different ways to set this up so what we'll do is we're going to install just a few things here so I we're going to go back to our console we're going to run NPM and we're going to run I for install and we're going to install let's see post CSS also the post CSS CLI the command line interface we're gonna install CSS Nano and we're going to include that as a part of our post CSS process as well as purge CSS the location that is at full human forward slash post CSS - purge CSS and I think that's going to be all that we need to run all right it's done by the way I forgot to add to save dev flag you're gonna want to add that as well in a real project also we're gonna add as a regular dependency NPM I watch and just like that and this is going to allow us to in at the end run a watch command just for live reloading okay so now if we come back we're going to create a post CSS configuration file I actually have a mini crash course on post CSS that are released last year I believe so you can check that out if you want to learn more about post CSS so it's post CSS dot config dot JSON file right here and this is where our config will go alright so first we're going to define a few constants up here so tell when CSS we're requiring we have purge CSS CSS Nano and autoprefixer alright next we're gonna have our module exports in a plugins array all right so I let's end that right here okay so we put into plugins in the very first thing that we're gonna run is based on our tailwind CSS all right so we call that and we point to the tailwind J's file next we're gonna run CSS Nano all right just like that and this is going to run a few different minification processes i believe i CSS Nano again if you're all we ever confused and because I deal with so many of these different packages it takes you're nicely formatted CSS and runs it through many focused optimizations to ensure that the final result is as small as possible for a production environment you can learn more about it here if you wish and then we're gonna run purge CSS alright so again purge CSS one of those things that you can look up yourself but here is the very basic set up so initially when I ran this just like this it worked but it did not work it broke the responsive nature of the layout that wasn't including my media queries for some reason so I did a lot of searching and I found that the fix I was in this piece of code right here alright I'm not going to even try to I this describe exactly what's happening here but nonetheless that is the fix right here and then at the final at the end we run autoprefixer on the results so it starts up at patel when CSS and it runs essentially basically the command that we ran by default here in the terminal up here and then it takes that result and run CSS Nano and then purge CSS and then autoprefixer and that should be good to go right there all right so now we're going to go to our package JSON file and we're going to create a script just to different I scripts here so first I'm gonna paste these in we'll say I MPM run build CSS is going to run the post CSS client which is the CLI we installed already and we're going to specify this source CSS main CSS file and the output is going to be put into a dist tail-end CSS file right here which is the same thing right there at that section then we're gonna run our watch command now the watch command will we'll watch and again this was from the NPM iWatch command that we installed it's gonna run this right here so NPM run it's gonna run this command and simply watch it in source so let's go ahead and save that and let's run our and get this so we can see this here yeah NPM we're gonna run NPM run build CSS first all right so it's running this process right here and it takes a little bit of time for it to show up but now if we go back to our tailwind we could see it's been minified and the size let's right-click and reveal an explorer is 4 KB so we went from that 390 KB file size down to just 4 KB because it looked and analyzed which is the help of these plugins right here in our index.html file and it was looking at exactly what we were using in terms of these classes and then it discarded any of the other unnecessary unused CSS classes you know in tailwind CSS itself very very cool so also you can run npm run watch I think that was it what it was called there we go so now I whenever you make a change to your index that HTML file and you're adding those different CSS classes this will rerun this command right here just to show you if we go back here and I just put like a space here we save it it's going to take about 4 to 5 seconds also depending as you can see it just ran to refactor that so that's why I didn't include at the beginning every time I made a change I want it to be instant but because there are you know it's a big file and there's different processes running and it's it's doing logic it's gonna take a few seconds for that to run through all right so hopefully you learned a lot I know that was kind of lengthy but again there's a ton to cover and I really didn't even cover most of it but hopefully me going back and forth between the documentation and showing you know how I was figuring things out will help you in your own projects I to understand how to use tailwind really it's all about looking at those docks and then memorizing those utility classes as much as possible alright make sure to subscribe if you have it yet and guys soon [Music] [Music]