My Next.js + Tailwind boilerplate

Introduction

Recently started working with Next.js and it’s been a game changer for me. Initially, I jumped from Vue to React, but after watching a couple videos about Next, I decided to move to it next (pun intended 😂). Here’s my boilerplate code I’ve been using for every project.

Next.js setup

First, we need to set up our Next.js app

npx create-next-app <project-name>

Once its been created, cd into the project

cd <project-name>

Tailwind CSS setup

Now, we need to install Tailwind CSS and its peer dependencies

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Then, initialize Tailwind. This should create 2 config files

• tailwind.config.js
• postcss.config.js

npx tailwindcss init -p

After, open up tailwind.config.js and replace the content array with the following

content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}"
],

Open up the global.css file, remove the default css and add the Tailwind directives

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

Wrap up

At this point, it’s just a matter of cleaning up a few other unnecessary imports and default css. After that, it should be smooth sailing.

https://tailwindcss.com/docs/guides/nextjs