Tailwind CSS Tutorial with Next.js and Typescript | Part 1 - Setup and Install

tailwind css is a utility-first css framework that recently has just passed one million weekly downloads on npm let's see why [Music] and before i kind of forget um i created a discord for this channel about a month ago but i keep forgetting to bring it up in my videos so if you guys would like to join just go to my youtube channel and you can see within the channel header there should be a little link there for my discord channel so we're pretty much just in there just talking about programming so if you would like that kind of a community feel free to come join and let's get back to tailwind and before we kind of get into setting it up and playing around with this library let's kind of just look over why it does why it is so popular right now and um we can just quickly go over some pros and cons as to using this library let's make sure you guys can actually see this um yeah so here are just some of the advantages that i kind of listed out when uh kind of just going through and looking through their documentation and just playing around with it according to their documentation it's pretty tiny so the most css projects actually ship with less than 10 kilobytes of code to production which is pretty nice it does give you quite a bit of control you don't really have this kind of like opinionated theme or just like this uh like material or something like that meaning that each project can have its own unique look even though it's uh maybe using the same elements pretty fast development if you're already familiar with css or you uh kind of learn their built-in classes you can actually develop pretty quickly uh security it's proven to be stable in production there's already a lot of uh projects in production that already kind of utilized tailwind css it's growing as i mentioned earlier it just passed one million weekly downloads their documentation i found is pretty good if you look online there may have been some issues with the documentation in version one but it seems in version two they've stepped that up quite a bit and they also offer tailwind ui which is pretty much just a way for you to kind of just like get different examples for different types of components which is really nice and it also comes with vs code intellisense meaning that you can actually find these built-in classes that you can utilize within your uh code to kind of just help find those classes a little bit easier you can just download a tailwind extension so that's pretty nice and with all positives we should also kind of look at some of the disadvantages when using uh tailwind css or why people might not really like it and uh the biggest thing that i always hear about why people don't really like tailwind css is because it's ugly um writing out your css within your html can lead to pretty ugly code meaning you have a bunch of utility classes within just trying to define a simple div or a wrapper or something like that it kind of does take a little bit getting used to there is a learning curve the built-in classes and how to utilize them and how to correctly use them can be a little difficult especially if you're not too familiar with css so if you're not really familiar with regular css it's going to be a little difficult for you to be able to utilize tailwind um so one suggestion is to actually go ahead and learn um just regular css before kind of jumping into this framework it'll make your life a lot easier repetition you can find yourself like duplicating a lot of utilities for example like small things like buttons or inputs and things like that you can find yourself constantly repeating different utility classes and another big thing is like do you really need this framework um it's just uh there seems to be kind of tension within the css community um from kind of what i gather from people either they love tailwind or they hate tailwind it's kind of this weird uh pretty polar um um under not understanding um kind of opinions on it so cool and now that we understand a little bit more why people enjoy or don't enjoy tailwind let's kind of get into uh programming it a little bit and setting it up uh with the next js project so what i'm going to do first i just want to kind of show you guys this example project and so you can actually create a simple uh with tailwind css next app using this command here and this is within the documentation for the next.js setup pretty much what this is going to do it's going to create a next app for you but it's also going to configure it with tailwind css's suggested configuration uh things like just in time mode um it'll configure a or it'll create a tailwind config file for you it'll also create a uh post css and install all of the necessary dependencies so once that's done i'll kind of walk through you guys or walk through quickly with you guys what that is and since that's finished initializing let's go to that project that we just created and let's just open it up real quick and as you can see let me zoom in a little bit um it kind of comes with these uh so for example post css config and i'm gonna go over these here in a little bit i just wanted to show you guys kind of what the configuration comes in there this tailwind pre-configured example for an xjs project you can see here it comes with the tailwind config package.json it'll install these dev dependencies which you need which is the tailwind css the post css auto prefixer and within the pages here you can see that it imports it and we're going to be doing this all manually i just wanted to show you guys that if you do want to save some time you can have just do that command that i showed earlier but let's actually go ahead and configure a project for tailwind css from scratch and also we're going to be using typescript as well because i just enjoy using typescript so to get that going what we're actually going to do is we're just going to do mpx create next app and then we're going to name it tailwind app but we're also going to pass in the typescript flag so this will create a next js project for us with typescript configured meaning we'll have a ts config file already in there as well as the typescript dev dependency which is nice so once that's done we can look and we can start configuring some other things cool and so now if we go to the tailwind app and we open it up let's see what it's pretty much just configured a simple ts config for us for our next.js application it's created this next config file it's also gone ahead and created some eslint so just extending this next core web vitals which we'll go ahead and change here in a little bit just to make it work uh better with um some typescript stuff and um yeah so that's pretty much it it's just a simple next.js application if you look at the package.json you can see we're using the next 11 react 17 we have types react we have eslint eslint config next as well as the typescript library and the next thing that we're going to do is just we're going to quickly install prettier so pretty much all we're going to do is we're going to add the dev dependency of printer as well as the eslint configuration for prettier so that we can include that in our eslint file and then we're going to go ahead and create that prettier configuration file which is just dot prettier rc.json and we're going to just plug this in which is pretty much just print width of 80. semicolon is true single quote is true just a simple prettier configurations that i like to use within my projects and once we have that we're actually then going to go ahead and we're going to add one more um plug-in here and this plug-in is going to be just a typescript esl eslimp plug-in so we're just going to kind of just use that to add some eslint rules for typescript and the way that we do that is after installing that library we go to eslintrc json and as you can see here it's just extending the next core web vitals and the next core web vitals is pretty much nex's more strict configuration you could also just do uh next but this just is a little bit stricter than the other one um and that comes from the next eslint config and then we're gonna just pretty much just play uh paste this um code in here which we then have uh environment so we just have the browsers true es2021 is true node is true and then we're extending the next core web vitals again but we're also extending the plug-ins recommended configuration as well as prettier and you got to make sure that prettier is the last one for it to work correctly so just be uh note of that and then we have the settings here which is just pretty much just detect what uh version of react we are using and now that that's all set up let's actually go ahead and start this and make sure everything is working correctly so then if i open up localhost 3000 you can see here we're able to load our page and everything seems to be working correctly so we're good to go there and so now let's actually install tailwind as i kind of showed earlier that pre-configuration kind of installed uh some three uh dev dependencies which is the tailwind css the post css as well as the auto prefixer plug-in so what i'm going to do is i'm going to just manually install those so i do that by just doing yarn add dash d tail and css at latest post css latest and auto prefix are latest and so pretty much if you're not familiar with what these libraries are um just a quick uh overview is let's go to our package.json here and so pretty much tailwind css of course it uh makes sense it's the ts the css framework for tailwind uh post css is a pretty much a post css tool it's a tool to transform your css using uh different javascript plugins which pretty much just provides an api for uh plugins to do useful things with your css like lan to find errors insert uh vendor prefixes and things like that and auto prefixer is just that it's a post css plugin that parses your css and adds uh vendor prefixes if you're not really familiar with what a vendor prefix is it's pretty much uh uses the data of the current browser um things like different browsers have different prefixes for example mozilla has like a dash moss dash webkit i'll put a link um in the description below for some documentation in terms of what vendor prefixes are but you shouldn't really have to worry too much about it you just really need to worry about installing those three libraries for now and with those installed now we can actually go ahead and we can create our tailwind configuration file and so we're going to do that by npx tailwind css init-p and so this will then create our tailwind css as well as our post css configuration file and if we look at that it kind of went ahead and created some uh default values so pretty much just plugins and we're going to be using the tailwind css as well as the auto prefixer for our post css config and then within the tailwind config we also have a pretty uh default configuration here of empty plugins empty variants empty themes and let's kind of go over what each one of these mean so pretty much purge purge is a way to just remove unused styles and optimizes your final build size so pretty much within purge you're gonna include uh the files that you are gonna be using meaning that like if you aren't using anything else it will actually go ahead and purge them from the css library meaning that your uh your final production build won't actually include the entire css with all the built-in classes it'll only include the building classes that you actually use dark mode is just whether to support dark mode or not um it's enabled this or it's disabled by default but you can actually enable it theme is if you want to define a color palette font types different border sizes and things like that you can include it within this theme here variance is pretty much just uh which variants are generated for each core uh utility plug-in so you can um create uh or add different um capabilities to different uh core utility plug-ins like one example we'll go over in part two which is like the disabled uh you can add like opacity to disabled and you can do that within here and uh plug-ins as well and uh this pretty much just allows you to register any other plug-ins with tailwind that you might want to use that can kind of generate extra components extra utilities base styles things like that and as a quick note uh since this is still part one variants are pretty useful but we'll also look in part two how to set up just in time mode which i kind of showed pretty quickly and that pretty much just automatically enables all variants so um but i do want to show you guys what that actually is in case you don't want to use just in time mode but i'll do that in part two but for this part yeah that's pretty much all this is um again i'll put a link in the description for the configuration of tailwind so you can actually go ahead and see what other options you can uh use or how to use these uh options specifically and then pretty much again as i touched quickly upon post css config is just for the post css library it's just a tailwind css and auto prefixes which are the two plugins that post css will use um with the tailwind library cool and so then the next thing that we're going to do is we're actually going to go ahead and create a source file and within the source file we're going to move our pages within the source file i just like to do that as a project structure and let's go ahead and close these out and then once we actually do that what we're going to then do is we're going to change our tailwind configuration to actually uh purge a couple of things and what we're going to do is pretty much we're going to include the source pages and then any file within there that ends in jst jsx or tsx as well as a components folder that we will be creating later and we want to make sure that we add those to purge so that we know that those are the ones that we're going to be using so um tailwind can know how to optimize it for our final build and cool and uh with that there's two different ways that we can actually go about importing tailwind the first way that we can do is within our source here and within our globals.css what we can actually do is we can add these three tailwind directives so the tailwind base tailwind components as well as tailwind utilities and pretty much what this is doing is pretty much just saying okay we're going to uh swap these directives out at build time with the styles that tailwind generates and it's pretty much useful if we plan on writing different custom css for our globals and things like that if you want to do it that way um i personally like doing it the other way and so was the recommended way from um that initial css not css the initial next.js project pre-configured with tailwind as i showed they actually imported it directly into app.tsx and so that's what we're going to be doing so actually what we're going to do is we're going to delete this pretty much just global css file as well as this home.module css files and we're actually going to remove the references to it within our code to make sure that we don't have any issues and then we're just going to clean this up since this is pretty much going to be using styles it's going to keep giving us errors but let's just go ahead and actually close those out and so right now it should just be head and that's fine for now uh we'll go we'll come back to this a little bit later and once we've kind of cleaned that up what we can then do is we can um actually import tailwind css to our application and again the way that we do that is we just import 101css tailwind.css and this is just the other way to actually import it so this way our entire application now has access to tailwind and let's actually test this out by creating a button within our index page here so what i'm going to do is i'm going to wrap this in a react fragment and then i'm just going to create a simple uh tailwind button and this button is pretty much just going to be and um we're going to kind of quickly go over or right now we're going to show that it's actually set up and working in part two we'll actually go into what these are and like uh what they actually mean but pretty much uh what we have here is just a button we're going to make it blue we're going to have it hover to actually use to change its color when it's hovered over we're going to make the text of the of the button white we're going to make it bold and we're gonna give it a couple of kind of just like a rounded feature as well as some padding um for the y and the x and so after we've kind of done that let's make sure that that's working correctly and we're going to do that by starting out with yarndev and then if we go to our local hills page here and we re refresh uh let's see if that button shows up and so it's just taking a little bit and there it is so as you can see the button's working there and it's nice and cool um um and another quick thing just to bring this up to you to uh your guys's attention and see if can i make this bigger how do i what am i doing here um i'm trying to make this bigger so you guys can see so when i first was going through and learning the library i did come across this issue and if you guys can see that it's pretty much just an unhandled runtime error that says loading chunk node modules blah blah webpack require if you ever uh run into this issue just uh know that there's a couple of ways to fix that and the way that you actually go ahead and fix that oh there's my notion notes for this video um there's pretty much what i did to fix it is you can just delete your dot next folder and start it again it's pretty much just a caching issue so just do rm.rf.next so what you could do within your project is rm.next like that and then you want to restart your application as well as force refresh on your browser and you can actually do a force refresh by shift f5 and so that'll clear the cache make sure that everything is fine and then that should be able to fix that webpack error if you do come across it cool and that's pretty much all i really have for uh part one of this video is just a quick uh introduction to tailwind why people like it why people dislike it as well as just how to set it up with the next js project as you can see it's pretty uh straightforward you can even use that uh super simple command initially to kind of have it all kind of pre-configured for you i just kind of wanted to do it manually to kind of walk through you guys at each step and what they each mean so you guys can get a better understanding of what the library is actually doing um but yeah so that's part one and i hope you guys enjoyed it and if you guys did please leave a like it really helps out the channel a lot uh subscribe for more programming content if this is what you guys are kind of into as well as leave a comment if you if you've actually used tailwind before and what's your experience been with it if you enjoy if you dislike it i'm kind of curious to hear both sides and so if you have any experience with it please let me know in the comment section below and i hope to see you guys in part two and so thanks again for watching [Applause] [Music] you

Channel: Leo Roese

Views: 1,345

Keywords: next, next.js, next js, typescript, javascript, react, tailwind, tailwind css, tailwind css setup, tailwind css setup next

Id: ZO70nxbnS0k

Length: 18min 33sec (1113 seconds)

Published: Thu Oct 14 2021