Boostrapping Next.js with TailwindCSS and TypeScript

Saurish Srivastava / May 15, 2021

2 minutes

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 (unsupported by Notion API)

Adding TypeScript

❌ Unsupported block (unsupported by Notion API)

Now start your development server:

❌ Unsupported block (unsupported by Notion API)

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 (unsupported by Notion API)

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

❌ Unsupported block (unsupported by Notion API)

We need to edit the tailwindcss.config.js:

❌ Unsupported block (unsupported by Notion API)

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

❌ Unsupported block (unsupported by Notion API)

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 (unsupported by Notion API)

The second way is to embed it into your CSS:

❌ Unsupported block (unsupported by Notion API)

That's it! You're Done!