Creating A New NextJs Project With TailWind CSS

Introduction

If you're like me, you've heard a lot about Tailwind CSS but you've never actually tried it out. That's about to change though. Join me in this blog series as I learn Tailwind CSS as we attempt to build reusable components within a React project (specifically, NextJs). Mistakes will be made, tears will be shed as we struggle to get things to look as we want, however hopefully by the end of each post both you and I have learned something new.

A quick note about this blog series, it isn't about Next, however I'll be using it throughout the blogs. Don't worry if you've never used React or Next, you should still be able to follow along and you never know... you may learn some extra things in the process! If you'd like a quick intro to Next I'd recommend giving the following video by Fireship a quick watch.

Lets hop into it!

Creating Our Project

Luckily for us, creating a new Next project that contains Tailwind can actually be done really easily. We're going to use one of the Next example templates which will allow us to create the project with Tailwind already installed. 

Once you've started your application, open your browser and navigate to localhost:3000 as this is the default port used for Next when running the development build. You should see roughly the same thing as is shown in the previous image.

You'll notice it looks the same as the standard Next project scaffolding, however if you open your project in your IDE (or favourite text editor) then you'll see you've got some extra files and extra packages included in your package.json. The markup used to create the page also uses Tailwind classes to create the same layout and design as the default project styles which is pretty cool.

Extra: TypeScript Configuration

I'm a fan of TypeScript and so have configured my Next project to use TypeScript, if you're looking to do the same then this section is for you. TypeScript was ranked as the second most loved language by developers in the 2020 Stack Overflow survey so chances are you'll enjoy using it too. If you're not interested in using TypeScript over JavaScript ( although I'm not sure why that would be the case ) then you can just ignore this section and continue on using JavaScript as you follow along, it shouldn't make much difference to your experience for the most part anyway for what we'll be doing.

tsconfig.json

Create a tsconfig.json file at the root of your project directory. This is the configuration I've used, feel free to copy it. You can alternatively create a blank file with the same name and it will auto configure for you to some defaults. 

Once you've done this you're going to need to add some extra dependencies, which you can do by using the following command in your command line. You're adding the TypeScript transpiler along with the React & Node TypeScript types.

Dependency Installation

Converting Files To TypeScript & Adding Types

Now you'll need to change the extensions on some of the files contained within your pages directory.

Change index.js to index.tsx and add types to the contents of the file.

And now you can update your index.js file to index.tsx

You can keep or delete the HTML markup thats returned by the Home function. Now if you run your yarn dev command you should see the same output as before on your browser when you connect to localhost:3000