TAILWIND CSS setup from scratch - With Webpack

[Music] it's time to check out tailwind CSS everybody's talking about tailwind today and it's pretty awesome to be honest so I'm very glad to present this video for you in this video we're going to check out how to set up a development environment with tailwind yeah because it isn't that straightforward so I created this video to show you how to set up your own development environment and I will stress that this is a dev environment where you can work with tailwind locally and try it out and stuff like that because you will have to add other stuff if you're going to use it in production but we'll get back to that soon as always make sure that you're inside a folder where you want to create a project and we're going to create a new folder and I'm going to call it tailwind - boilerplate right let's navigate inside that folder there's nothing leer now so we have to create some stuff here first we can make a get in it so that we'll make sure that this is using it then we can also type m-pam in it - why so we create a package.json file you can see that we have it there and we can open up our code editor or if you want to create the files and folders in your terminal it's up to you because now I'm going to create some stuff here bump this up for you okay so we inside a folder now and we're going to create two other folders first I create a folder that's called this and then not a folder that's called SRC and then we have to create some files inside our dist folder we create a file let's call index.html an inside our source folder we're going to create a new file that we can call yes we can name it index dot yes and also file that's called styles dot CSS you can name them to wherever you want of course now we're going to create some files here so inside a root folder here we can close this once we create a file that we call post CSS dot config yes and this is important that you get this name incorrectly then we have another file that we'll call web pack dot config dot yes so that's the files that we're going to create and we're going to return to the terminal now and install all our dependencies alright so we have a few dependencies that we need to install and we're going to install them as dev dependencies so NPM I - - save - dev first of course we're going to need tailwind so tailwind CSS then we're going to need web pack because web pack is the bundler that we use in this tutorial so web pack then we need the web pack - CLI and web pack - dev - server cuz I'm going to use the web pack dev server so it will be a really smooth dev environment to work with it will order update when you change the files and stuff like that and you can serve the files locally when you develop stuff so you could of course not use the dev server if you don't want to do that but I don't use it here so that's the tailwind and web pack stuff then we need some other dependencies here for this to work and first we have something that's called CSS - loader and I will get back to this when we set up the web pack config we also need something that's called style - loader and tailwind is based on post CSS so we'll need post CSS - loader and then we need post CSS it changed the row here now sorry for that see if we can do it like this yeah it's post CSS so it's a lot of packages will install here but this is enough so we press Enter that seemed to work so back inside of our code editor Oh what is it complaining about yeah it it tells me to add a gift ignore file and we should do that of course so I would say yes here and it will create a giving nor where we ignore the node models folder we don't want get to track that one okay and I'll make this bigger for us I got this insanely big font size here for you guys to see everything on my screen but it's actually quite hard to code like this okay so let's first start off in our SRC folder in the index dot JSP web pack by default only understands JavaScript so we have to import from dot forward slash or Styles dot CSS so it's important to have that one inside of the index dot JS file and this is the only row of code we need inside of this file and then I actually forgot to do something here so let's go back inside of the terminal we don't have to do this but we can create a tailwind config file and you can do that with MPX tailwind in it so as you can see here it will create this config file for us we're not going to modify this now but it could be good for you to know that you can create this config file and it's in this file that you config everything that you need to do for tailwind right back inside of styles dot CSS and inside here we're going to use the tailwind directive to insert our base components and utilities styles inside of our CSS so tailwind and then we have the base and another tailwind directive you know we should have we should have a semicolon and then we have the components and a third directive tailwind utilities so that's all the directives we need and as you can see here vias code complaints unknown a true Italian CSS it doesn't matter because this is only some limiting stuff we can save this but if you want to fix this I found this little page here Visual Studio code CSS limiting with tailwind you can install some stuff here I think it's a plug-in for vias code to use if you want to get rid of this so just do a little googling for this or use this URL up here and you will be able to fix this I won't care about it now but it's an easy fix if you want to do that okay so that's our index dot JSP a limb port or stars file and our Styles file will use the tailwind directive to import the base components and utilities okay so let's set up the other files first we can set up the post CSS dot config dot J's file and we type module dot exports and we going to config post CSS to use tailwind so we have the plugins it's an array we require and this is going to get long so I'll remove this sidebar we require the tailwind CSS and we're going to specify from dot forward slash or tailwind dot config dot KS we make a coma and another require we're going to use the order prefix err some Auto formatting save this file so this is all the setup that we need for the post CSS config it's basically telling the post CSS that we want to use tailwind and the config for the tailwind and then we order prefix it also then we have the dreaded web pack of fake web pack is known to be a little bit advanced and I can totally understand that because it a little bit advanced but I'm going to try to explain this for you as good as possible so let's be working in the web pack dot config dot J is filed and I'll remove the side bar again and we'll start from the top here first we're going to require path and path is built-in in node.js so it require path we're going to use the property result from path and result we'll create the proper path spring for us okay then we module dot exports equals and we have an object and we are going to set up the config now for web pack first we have the entry property and from dot forward slash SRC index dot JSP and this is going to be our entry file for web pack and if you remember we just have this little row here when we import the Styles so this is the entry point for web pack coma and we have another property that we call output we have an object and here we have the path from path we have a property called resolve so path dot reso double underscore and the dear name will give us the directory that we're in a coma and we tell it that it's the dist folder that we created that we want to use for the output we have a coma and we're also going to specify a file name that we want to output to that folder and it's going to be bundled of yes you can call it whatever you want okay so this will look in the entry file and we'll process everything for us and output the bundle dot KS in the distal der and as I said before web pack only understands JavaScript but we're going to be using CSS now so we have to specify some loaders for this to work and you specify loaders in web pack on the Mod object module and we have an object then we set up some rules we have an array and inside our array if we have another object and we want to look in our CSS files so we test we have a property called test and then we have a regular expression we have a forward slash and then we have a back slash dot CSS dollar sign and the forest slash and a coma and this will make sure that it will check all the CSS files if you don't know about regular expressions there's probably a lot people that don't do that and I'm not an expert either so I have to look you this up if you don't understand it but this will make sure that it check all the files that has the extension of CSS then we have a property that's called use and this is all web packed stuff it has to be named like this and here we're going to specify unloaders remember this I actually going to put a comment here note order is from from last to first that means we're going to specify three loaders here it's going to start from the bottom and it will chain them up to the top so this is how low does work you run it through a loader and the output there will be the input to the next loader so it will get chained but it will work from the bottom up so first we're actually going to specify style - loader and this is going to be the last loader in the shane style - loader will make sure that the CSS that we're going to create here is injected in the dome because web pack will put the CSS in the bundle that it creates but style - loader will take that CSS and inject it into the dome then we have the second loader and we're going to have some options on this one so it's an object and we have a property called loader and we specify the loader it's the CSS - loader in short CSS loader will read the CSS from the test files and make sure that it parses all the imports and URLs for us correctly and we're also going to set an option for this one options and we have an object and we have something that's called import loaders and we set at 1 to 1 so it's widely discussed on the internet and to be honest I don't have a really clear explanation about it either when we set this one to 1 it will make sure that it applied this one to be loader before CSS loader and in this case it's going to be the post CSS - loader as I said before it will go through these ones from bottom up so post CSS then CSS and star loader it will take it in this order so this will work if we create an index dot HTML file that we're going to do soon it will work but I want to set up the dev server also for this one so just below here we make a coma arrow is specify the property dev server : a new object watch content base and this is all web pack stuff that has to be specified like this it's true and the content base : path dot resolved double underscore dere name and it's going to look in the distal der have another coma and the last I forgot the t content base and then we set open to true because we wanted to open the web browser for us automatically okay do some order formatting and save this one so this is our web pack setup and as you can see it yeah it is quite advanced I think it's not that easy to grasp actually ok so just one more thing to do to get this upper running we have to create our index dot HTML file in the dist folder so make sure that you're inside index dot HTML are we going to create a very basic HTML file here so first doctype HTML then we have HTML in language we can set up one through English and we have our head and we have some meta we can set the char set to utf-8 self close it then we have another meta name equals viewport this is actually not needed for this tutorial but it's great to have it here from the beginning so you know that you're ready to go we set the content to width equals device - width and this one is for it to work with mobile devices initial it's getting short on space here initial - scale equals to 1 and we serve close this one then we can set up a title and yeah awesome until we and setup right so that's the head then we have a body we create a div with a class and we're actually not going to specify any class yet I'm going to do that soon we're going to have an h1 tag yeah this is awesome and then it's really important to specify the script because this is the script that webpack will output all the stuff - so we have a script tag and the source is going to be bundled yes because that's the one that we specified in the web pack config alright and yeah we can move this one inside the body like that and do some order formatting and this should be all that we need save it go back inside of our terminal know we can actually also specify the start scripts here first so inside a package talk JSON file you can see that we have this test script that is created by default I want to make a start script for us start : and from web pack - dev - server double death mode equals development double - config we're going to specify the config and that's the web pack dot config dot j s and make sure to make a coma at the end we could also make a build script here but we're not going to use that no yeah I forgot to mention that before inside or web pack config you should if you could use this in production you should also add some plug-in that will minify your CSS and make sure to clean up your CSS to only output stuff that you need but I didn't do that now because as you can see this is already getting a quite long video so I'm not doing that here because this is for you to get up and running to use this locally and learn tailwind and this will work well for that but if you're using this in production make sure that you also add some plugins that will minify your CSS and clean up all the stuff that we don't use in the CSS alright so that's it let's go inside of our terminal I can clear it and type NPM start and hopefully this will work yes it is if we go back here this is going to be the final outputs or below this we have installed it with tailwind yet but we're going to try that out now go back inside of the code editor and inside or index dot HTML file and this class here we can specify some tailwind classes and we're going to create the container we set the mx2 order to make it Center then we set the back and green maybe 400 and we set the Morgan or why to tell the padding to tell and I want some rounded corners surrounded - medium MD so that's the tailwind classes for that one save it and as you can see it starts correctly it's using taylor e and bo that's great it also reloaded itself so this is so great with the web pack server you don't have to reload stuff it will know when you change stuff in the code and reload it for you and then we have the h1 tag we can specify some stars on that one also so class text - green - maybe 800 on that one and text - LD so we've specified that the text should be a little bit larger and we Center the text with text - sender and save it yeah so boo this was a lot of thing but this is how you set up tailwind to work for you locally and you can use this if you specify some more stuff as I said some plugins and stuff you can use this in production also hope this was helpful for you if you like this check out my other videos and make sure to subscribe because I'm putting up videos here on a regular basis

Channel: Weibenfalk

Views: 5,408

Keywords: development, coding, tailwind css, tailwind css from scratch, setup tailwind css, tailwind css tutorial, web development

Id: dRi7Y4GHylU

Length: 21min 34sec (1294 seconds)

Published: Thu Feb 13 2020