Next.js, Typescript and TailwindCSS

February 9, 2021
views 5 min read

Looking for the Prettier and ESLint part of this article? Click here

In this article we'll learn how to create a project using Next.js, TypeScript and TailwindCSS. If you've checked some of my previous Next.js articles you know that I like to start my projects with an empty folder and not by using tools such as npx create-next-app.


Init

First of all we'll create our project folder and init our project with some default configurations:

take nextjs-typescript-tailwind && npm init -y

Great, now into handling Next.js, we'll need to install 3 packages and change the scripts on our package.json file:

Install the necessary packages:

npm i next react react-dom

And, replace our scripts:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Awesome. We can now run npm run dev, it should throw an error, but that's fine.

Error: > Couldn't find a pages directory. Please create one under the project root

That's normal, Next.js needs a pages folder with a file in it, run:

mkdir pages && touch pages/index.js

When you run npm run dev it should start our server without any issues. Before putting some content in our file lets handle TypeScript first.


TypeScript

With Next.js we can simply create a tsconfig.json file, when running npm run dev Next.js will tell us what we're missing to get TypeScript working. Run:

touch tsconfig.json && npm run dev

You should see something like:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

npm install --save-dev typescript @types/react @types/node

Pretty straight forward instructions, lets install our dependencies:

npm install --save-dev typescript @types/react @types/node

When running npm run dev now it should all work just fine. That means we can now rename our index.js file to index.tsx, run:

mv pages/index.js pages/index.tsx

Open pages/index.tsx and lets put some content in it:

function Homepage() {
  return <>Our homepage</>
}

export default Homepage

Run npm run dev and you should have a working application now.


TailwindCSS

Installing Tailwind in a Next.js application is really simple. We'll need to install 3 packages, run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Configuration files

With the following command 2 files will be generated, tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

That's great. We now only need to change a little bit our tailwind.config.js file:

module.exports = {
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Most tutorials don't mention that we should include ts and tsx as part of the purge config. When that's the case you might see an application without any styling at all after deployed.


Alright, lets just add some styling to our Homepage component:

function Homepage() {
  return (
    <h1 className="text-center my-24 font-black tracking-tight text-6xl">Our homepage</h1>
  )
}

export default Homepage

Well, looks like it's not quite working is it? We've missed adding Tailwind styles into our app.

To do that, first we'll create a file called _app.tsx inside our pages folder:

touch pages/_app.tsx

And lets take care of creating our css file as well:

touch styles/base.css

Inside our _app.tsx we'll put the Next.js default component as well as importing our new base.css file:

import '../styles/base.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

And inside our base.css file we can import TailwindCSS utility classes:

@tailwind base;
@tailwind components;
@tailwind utilities;

Run our server and our Our Homepage title should look much better now.


Restrict

Alright, so we have our application running, but we're using TypeScript for a reason right? We want to enforce types in our application.

For that we just need to change a tiny configuration in our tsconfig.json file:

{
  "compilerOptions": {
    // ...
    "strict": true,
    // ...
  }
}

We'll be changing strict from false to true. Depending on your IDE you should start seeing warning that some props or components are missing a type.

Lets take a look at _app.tsx, we should see 2 warnings:

Binding element 'Component' implicitly has an 'any' type.
Binding element 'pageProps' implicitly has an 'any' type.

To set the types of both Component and pageProps we can use the AppProps that Next.js provide us:

import type { AppProps } from 'next/app'

import '../styles/base.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

This should make the warnings go away.


And that's a wrap! If you want you can check the whole code in this repo.

Follow me on Twitter ✌🏻

Read next
How to write readable functions
January 14, 2021
views