Getting Started with Next.js & Tailwind CSS

lately i've been using tailwind css and xjs for all of my side projects and yet every time i'm always forgetting how to set them up so i wanted to make a quick video and walk through how i set up my project and hopefully that'll help you out links to this code will be in the description along with other repositories and resources that i found helpful let's get started okay so we're going to get started by using create next app so we type in npx create dash next dash app and then we'll give our project our name in this case i'll call it tailwindstarter and we're going to go ahead and let that finish that's going to install next.js and all the packages it needs to get started including react awesome now that that's done let's cd into our project and then now we're going to install tailwind and all of the packages that it needs and we're going to go ahead and install the latest versions of all of these so that's tailwind post css and auto prefixer okay now the next thing i'm going to do is use tailwinds init command so that's npx tailwind css init dash p the dash p is going to initialize a post css config file and there we have it we have a tailwind file and we have a post css config file now the next thing i'm going to do is actually make sure that this project is using a newer version of node in this case i have node version 14.15 installed on my computer so the way i do that on my setup is i create an nvm rc file and my project will automatically use that whenever it's running node so let's open up nvmrc and the reason i'm doing this is because in the past i've run into trouble with tailwind specifically at the build step if i'm using an older version of node i'll start getting weird errors and it won't actually build so now that we have our nvmrc file set up the next thing we're going to do is head into our tailwind file and for the purge key we're going to want to make sure that tailwind knows where it can purge the tailwind classes that we're not using that's going to be at pages and then i'm going to tell it to get rid of anything with js or jsx if you're using typescript you'd want to add you know ts or tsx here and normally in my projects i also have a components directory so i'll go ahead and add that as well now we should be able to get our project up and running at this point so let's make sure that's running okay so i'm gonna head over to our index page and i'm gonna remove all of this uh markup because i'm not gonna need that and then we can get rid of this as well okay so right now we're not gonna have any tailwind classes but just a double just to double check okay nothing so the next thing we need to do is import our tailwind classes now i like to do this actually in app.js just import tailwind but there's actually another way to do it and we'll cover that right after and there you go we have our styles being applied now importing it in js is a great option if you don't plan on adding any custom css yourself but if you're going to add custom css you can go ahead and add tailwind in your css files now this global css was created for us by the next starter command so the other way is to use at tailwind and then import base then components and then lastly utilities and we can remove this and just keep our regular css import and now if we go back after our project finishes building we should have tailwind ready to go so there you have it a fully set up next js and tailwind project the code for this will be in the description and i'll catch you in the next video

Channel: Darin Doria

Views: 2,210

Rating: 5 out of 5

Keywords: next js, next js 10, tailwind css

Id: xG70NpE8Q_Y

Length: 4min 40sec (280 seconds)

Published: Thu Jan 28 2021