Boostrapping Next.js with TailwindCSS and TypeScript

Saurish Srivastava / May 15, 2021

2 minutes / –––

Update

Unfortunately, the Notion API does not support mutli-line code blocks. Please check out the following post on my old domain to see how to properly bootstrap Next.js with TailwindCSS and TypeScript: https://old.saurish.com/blog/bootstrap.

Introduction

I've recently been utilizing TypeScript for a few of my projects, and I wanted to create a guide on bootstrapping boostrap a Next.js app with TailwindCSS.

Creating a Next.js application

❌ Unsupported block (code)

Adding TypeScript

❌ Unsupported block (code)

Now start your development server:

❌ Unsupported block (code)

Next.js will automatically recognize the tsconfig.json file and write the default configurations, with some custom compiler options.

Now you're ready to use TypesScript, so you can change your _app.js and index.js files to _app.tsx and index.tsx!

Adding TailwindCSS

❌ Unsupported block (code)

Next, we need to add the tailwindcss.config.js and postcss.config.js files:

❌ Unsupported block (code)

We need to edit the tailwindcss.config.js:

❌ Unsupported block (code)

Change purge:[] to purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']:

❌ Unsupported block (code)

We now need to embed TailwindCSS into our JS/CSS – there are two ways:

The first is to embed it directly into the JS app itself:

❌ Unsupported block (code)

The second way is to embed it into your CSS:

❌ Unsupported block (code)

That's it! You're Done!