Easily Set Up Tailwind CSS with Vanilla JavaScript in 10 Minutes

what's up everyone tailwind css is the new hotness in front end design and i love it also uh so i've used it in next.js i've used it in react i've used in a lot of different places but i've never used it with just vanilla javascript so i figured i'd create a video to show you how i set it up myself in just a few minutes if you are new to the channel first of all welcome thanks for checking out the video my name is james quick and i do weekly and two to three times a week videos on web development related topics so if you're interested in that make sure to stick around for the video and the channel i do want to share one thing that i am starting a podcast with my friend amy dutton called compressed fm and we are launching by the time this video is out a few weeks in the future by the time you watch this video maybe it's already launched so if you're interested in weekly podcasts about web development and web design topics make sure to check us out at compressed.fm there'll be a link in the description below all right tail1css vanilla javascript let's go all right so as we get started here i've got an article that i found on medium from sebastian eshweiler tail1css for absolute beginners and this is kind of the basic steps that i followed here but i just wanted to have that for reference i'll have a link to that in the description below so you can follow it as well so i am in a brand new folder inside of vs code and the first thing we need to do is just do an npm init dash y this will initialize this thing as a javascript project and the dash y will basically say hey go ahead and do all the default values including taking the name of the project from the name of the folder that i'm in and what this does is it creates this package.json file which has general metadata about our application and we're going to install dependencies here in a second that will be listed inside the dependency section in the package.json now the next thing we want to do is do the actual npm install of tailwind css so we want to install that package all right so it looks like that is done installing and since that's finished what we want is to create a new folder called css and then in there we're going to create a style z dot css and what we're going to do in here is basically define what components of tailwind we want to include in our final css so we'll do some annotations for tailwind base for tailwind components and for tailwind utilities hopefully i get all those spelled correctly so this source css file is now going to define that it's going to need reference to all those different aspects of tailwind from here we can do mpx tailwind css init and what this will do in theory is it will let us go ahead and create the configuration file for tail 1 css but it's saying that we're missing a package that we need to have and this is slightly different than what you found in those instructions so what i'm going to do is go ahead and install we'll need auto prefixer we'll need post css cli and then i'm going to install something called watch that we'll cover here in a second so i'm going to install all those packages once we get the auto prefix or installed we should be able to then run our mpx tailwind init command again so if we try that again this should create our base tailwind config file and this is all the stuff that we need by default now one thing we'll come back to here is the is this purge here in a minute now the last configuration file we'll need in here will be a post css.config.js file and we'll paste in uh basically just requiring these plugins for tailwind css and for auto prefixer requiring tail one css here we'll pick up on those annotations that we put inside inside of styles auto prefixer we'll do some prefixes for our styles as it gets converted all right now the next thing we need to do is actually define inside of our package.json a script for building and what this command will do this will run post css it will you specify which file you're looking to compile so this is the styles file inside of the css folder so that's this file here that we've already looked at and this is saying the output directory will be build.css so when we save this this will do if we do npm run build this will look at this origin styles.css it will use tailwind it will use auto prefixer and then it will create the output inside of a build directory here and you'll see this is going to be a big long huge file and i think this is basically all of the tailwind css code we'll talk about purging here in a second but with that in place that means that we can create inside of our build directory maybe we can create our index.html and the bang character in here will give you access to boilerplate html file give this a title of tailwind vanilla js and then i'll also add an h1 for tailwind vanilla js so this is just a simple html file here what we want to do is link to that css file the output css file so inside of the same directory we want to link to styles.css so one trick that we can do i've got an extension called a live server extension installed i've got a video on that that you can check out if you want to but i'm going to open the command palette and i'm going to start the live open with live server what this will do is it will kind of give us a live server as you would probably expect that will auto reload as we save so if i say updated save now this thing has been updated up here let me zoom in a bit for this to be a little easier to see all right so just to check that these uh tailwind styles are ready uh let's do a class and we'll just say text for xl this should make this text much much bigger there you go and you could do text red 400 i have to make sure i get these right so there's our 400 color of red and if we wanted to make that darker you could go up to a 900 and have a really dark red there so tell when css is working right now the only issue that we have is that this is copying over basically all of the tailwind styles into here which is not what we want if you look at how big this file is this is um a hundred thousand two hundred thousand almost two hundred thousand lines of code that's a lot of code so we want to we want to kind of uh minimize that so inside of our tailwind config file we can update our purge and instead of just being a an empty array we can have it be an object or we can say enabled is true and then we tell it what content we want to look for and basically what this does is it looks for any reference to class names inside of the files that we specify here so any class names that aren't found in our source files tailwind will not include those classes inside inside of the output styles.css so you'll see remember that thing was like 200 000 lines of code a second ago we'll see what this looks like in a second so let's do uh slash build we want to say hey anything inside of the build directory and then basically anything inside of that that ends in html that's where we want to look for references to class names from tailwind so when we do this we save that file we then run an npm run build again this will now do an optimized build and if we look at the styles.css when it's finished it's still going to be a decently big file but it's now 625 lines of code instead of 200 000 lines of code and if we look in here there should be the text red is in here at text 900 but you don't see any other text colors but if we were to for example if we were to search text read 500 oh that class is not in here but if we then updated our html save that and then ran another build you'll see that the text red 900 is not there anymore but the text read 500 is because it found a reference to that thing inside of here so here's that text red 500. now the one thing that is not so optimal about this is we have to run a build anytime we change our class name so there's kind of two different things that you could do you could conditionally check this path or you could conditionally conditionally enable this thing to be true based on some sort of node environment variable so let's do a console.log of process.env.nodenv let's look let's see what this looks like here and this will run in our npm run build so we should see that this is in development right now this string is in development versus production so we could check to see uh this enabled button we could uh change this whether or not we're in production or development so what we could do is have a variable called purge and then say this is going to be process dot env dot node env and we'll do a ternary here so if that thing equals production we will say that purge will be true otherwise this thing will be false so that enables us now to include this purge here and say hey we only want to purge when we're going to production so that will allow when we do a build locally it will grab all the css so we don't have to recompile it every time and then when we deploy to production it will then do the minimize build when we deploy it so let's do an npm run build again this should actually go back to that really big file versus the small one that we just saw so if we open this style css up we see now we get our really really big file in here in production it will be back to that small one now i mentioned we installed the watch command earlier and that was an idea that i had where we could define a watch script and this thing will uh watch and it will run this command so let's actually put this inside of quotes so it will run that watch command it will run the npm run build and command anytime it sees a change inside of slash disk so that's what that watch command will do it will continue to build that stuff anytime we change something in our disk so if we were to change something inside of the index.html file then it would go and re-run the build now the problem with that is it's looking for changes inside of the build and if the index html file is changing which triggers a rebuild which changes the styles.css it's now going to do a continuous rebuild as well so we had i had that watch command set up but opted to go for this option here where i had the purge variable and then determine whether or not to actually enable that purge based on it being in development or production all right so that is how you set up tailwind css inside of a vanilla javascript project if you'd like to see more tailwind css on this channel and demos and tutorials and stuff like that let me know in the comments below in the meantime i hope you enjoyed the video if you did make sure to like it subscribe to the channel so you can check out more content in the future and i'll see you next time

Channel: James Q Quick

Views: 19,023

Keywords: tailwind css setup, tailwind css tutorial, tailwind and vanilla javascript, how to set up tailwindcss, tailwind configuration, vanilla javascript, javascript, web development, tailwind css, tailwind tutorial, tailwind css tutorial for beginners, how to use tailwind css

Id: zTjxyIq0nqU

Length: 11min 16sec (676 seconds)

Published: Tue Mar 30 2021