How to Add TailwindCSS to a NextJS Application

hey there are you a big fan of tailwind css and next js do you want to learn how combining the two can make building great looking applications super simple if so you've come to the right place because that's exactly what we're gonna do in today's video let's get to it [Music] alright let's get into it so if you're not familiar with next.js it is a react-based framework for building modern applications nexjs provides all sorts of additional functionality to react such as server-side rendering static site generation and a whole lot of other features that developers will find invaluable tailwind css on the other hand is a utility first css framework for building custom designs so rather than giving you a bunch of components it gives you utility classes that allow you to create your own components and scale them and build them out and customize them and what i want to do in this video is show you how you can integrate tailwind css into your next.js application to have a really good framework for building powerful designs so to get started i'm going to open up my visual studio code and we're going to start off by creating a brand new next.js application and the way we're going to do this is we're going to use npx so we'll call mpx create next app and we'll give it the name of good ui now remember you can name it anything you want but i just chose good ui for our app name and this is going to take a couple of seconds to download and install our dependencies so i will see you in just a second excellent so it looks like our application was successfully installed let's uh navigate into it so i'm going to clear the console and go into our good ui directory and let's start our server and make sure that it runs so to do this we're going to execute npm run dev and our server has started on localhost 3000 let's navigate to it and make sure that it is working so we'll go to localhost 3000 and we see the welcome to nexjs default message next we're going to go back into our code editor and add tailwind css so in my code editor let's stop the server here and let's actually open the folder so that we can navigate through our directory and make sure that we're doing everything correctly so what i'm going to do is open up the good ui folder that we just created and where do we put that all right so we are in our good ui directory the next thing we're going to do is install tailwind css as a dependency for our project so let's go ahead and open the console and we'll run npm install tailwind css and again this is also going to take a couple of seconds to install but once it's installed we'll be able to go to the next step tailwind css installed the next step we're going to take is pretty much the same step we would do if we were installing tailwind in any other application and that is to create a css file which is going to import our tailwind dependencies and utilities so let's go ahead and navigate to our styles directory and in here we're going to create a new file called index.css so i'll say touch index.css and that's going to be created so within this index.css we are going to import our tailwind utilities and those are tailwind based so to get the base information tailwind components because tailwind does provide a series of different components that we can use and i think i spelled components wrong and then finally tailwind utilities so far so good now the next thing we're going to want to do is create a tailwind config file which is going to allow us to configure our specific instance of tailwind css so let's go back to the root directory we'll go up one one directory clear this and let's create that tailwind config file and the way we're gonna do this is we're gonna run npx tailwind init and as you can see what this is gonna do is it's gonna create a tailwind.config.js file at our root application level and it's going to give us a number of different variables variants plugins that we can now configure to enhance our tailwind installation and the final thing we're going to need to do is create a postcss.config file which is going to allow us to tell nexjs that we want to process this tailwind configuration file bring in our tailwind library and use that rather than the built-in xjs post css configuration so to do this we're going to simply create a new file we'll call it postcss.config.js and in here what we're going to do is simply export so we'll say module.exports plugins and the only post css plugin that we're going to use for the time being is going to be tailwind css now you can add additional plugins here additional transformations and additional changes you would want in your post css configuration but for our example just to keep it really simple we're just importing tailwind css now one important thing to note about using a custom postcss.config file in your nexjs application is that this is going to override the default post css configuration that next.js provides so the existence of post css.config in our directory here means that next.js isn't going to use its own anymore so by default next.js provides its own post css configuration file and if you add your own this one takes precedence so all of the defaults like auto prefixer and a couple of others that nexjs provides by default would not be included and you would have to call them out specifically here but in our example we're not going to do any of that we're just going to call tailwind css and the final thing we're going to do is we're going to go into our pages directory into this underscore app which is our main component and we're going to import that tailwind css file that that we created that's going to have our tailwind css styles so we're going to say import styles and we called it index.css and then we can remove this globals.css which comes by default in in the next js starter now let's start up our application and see if this was successful so i am going to clear the console and run mpm run dev and it looks like we are good to go our server has started on localhost 3000 so let's navigate there and see if our user experience has changed now it doesn't look like it has changed all that much and the reason for this is because we're not using any tailwind css utilities so i think the font might have changed a little bit because tailwind css overrode the the default font but we can verify that delvin css did load by looking at our sources and seeing this index.css file and seeing that it was loaded um and it starts with the normalize.css and if we scroll down we'll see all of the tailwind css utilities such as you know text orange 400 for setting your text color to orange and there should be around sixty eight sixty nine thousand lines of tailwind telling ui until in css classes so we can we can see that we have successfully loaded um telben css into our application but let's also confirm that this works by bringing in a tailwind css component into our application and rendering it now to do this i'm going to go to the tailwind css website and go into their component section and here they have a couple of examples so you shouldn't necessarily use these by default but this is just the team's way of showing you what is possible with television css the tailwind team also has a product called tailwind ui which gives you beautiful ui components that are created by the team using tailwind css and if you're interested you can check that out at tailwindui.com and they have all sorts of different components that you can just drag and drop and use in your applications but getting back into our video let's go ahead and take a look at the cards example and we'll just take this stacked card and copy the code for it and paste it in our next js application so i'm just going to copy all of this go into visual studio code let's go into our index file here and let's remove the default next.js content so this footer and this main area and what we'll do is we'll just paste that component that was given to us by tailwind css i'll have to fix this guy and now if we go into our application into our code we'll see that that card has rendered so we can see the shadow on it we can see um this pill ui and then this sunset in the mountains is not rendering because it's looking at a local resource or it's searching for a local resource called card top but we can fix this by going to unsplash for example and picking up a random image so let's just go and we'll take this image copy its address and replace it so now if we go back into our application we'll see that we have this card loaded and it's using the tailwind ui elements that we imported now let's go ahead and make a couple of changes so if we go into our code and you know here we're using padding x of 6. if we were to change this to padding x of i don't know let's say 32 for example and go back into our code we would see that our paragraph and our content here has a lot less or a lot more white space and a lot less content per line so we can see that our tailwind css classes are loaded and now any class that we wanted to use from the tailwind docks we can very easily uh look it up you know what what are we trying to do are we trying to do um you know implement flexbox are we trying to add spacing margin uh are we trying to edit our images anything that is in the docs here we can very easily change and just to show you another example let's say we wanted to change the font weight so there's all of these different styles for the font in tailwind css and let's say we wanted to change the paragraph here to have the font of extra bold so we could just copy it and paste it here so we have text base let's change that to font extra bold save it go back into our application and we'll see that our paragraph has extra bold content now the last thing i want to show before we close out this video is how talvin css can allow us to purge all of those unused styles so if we take a look at that sources tab again and this index.css file we see that it is a very very big big file there is well over 69 000 lines of code here and we are very likely not going to be using all of it you know if we are in development mode it may not matter as much but definitely when you put your app in production you want to load as few resources as possible to render your ui and as a version 1.4 tailwind css has purging functionality built in and to show you how this works let's go into our visual studio code and let's open that tailwind.config.js file that we created earlier and look at this first purge element this is where we can tell kelvincss where to find our html files and to only render and to only include the classes the utility classes that we are actually using in our application and this card all of the other ones and the way that we're going to do this is within this purge array here we're actually going to change it to an object and the first thing the first property we're going to pass to this object is going to be called enabled we'll set that to true and then the second property is going to be content which is going to be an array of files that we want to look for so let me add that comma here and for our content here what we care about is all of our pages so we can very easily tell tailwind css to take a look at all of our pages and extract just the classes that are used in our pages and discard all of them and the way that we're going to do this is we're just going to pass in a string that looks at our pages directory and then looks inside of it looks inside of that directory and gets all of the documents that end in javascript now what this is going to do is every time our application is built only the styles that we have used in our application are going to be rendered and the ones that are not used are going to be discarded and won't be loaded into our application so to see how this works i'm going to restart the server so let's stop it here clear and then run npm run dev and again our server has started localhost 3000 let's go into our application let's refresh and we still see our tailwind ui loaded just how we expected it we have that card we have the the coldest sunset and everything looks great but now if we take a look at our sources element and this index.css file rather than it being you know 70 69 000 plus lines of code it is only 868 lines of code and it only includes the classes that we are using in our application and i think this is just one of the coolest features of tailwind css and i think that about wraps this video up um in this video i showed you how to create a new nexjs application and add tailwind css to it we took a look at the tailwind configuration file and showed you how you can enable purging on it and then we also took a look at creating a custom post css configuration file and the key thing to remember here is if you are building a next.js application that has its own post css config file that is going to overwrite an existing post css configuration file that next.js provides by default but that's all for this video i hope you found it useful if you have any questions please let me know in the comments below and i will see you next time

Channel: Ado Kukic

Views: 10,203

Keywords: TailwindCSS, NextJS, TailwindCSS and NextJs, Adding TailwindCSS, TailwindCSS Purge, CSS Purge, PostCSS, TailwindCSS Init, TailwindUI, CSS Components

Id: b_Y3HD870Jk

Length: 15min 17sec (917 seconds)

Published: Sat Aug 08 2020