Setting Up Next.js with Tailwind CSS & Typescript

From the hundreds of javascript frontend frameworks to choose from, next.js is the one that strikes me the most.

Combined with tailwind CSS and typescript, next.js becomes the choice for any frontend project.

Lets Go

Open up your terminal and verify that you have node and npm installed with these commands.

$ node --version
$ npm --version

If you don’t get a version number as a output, then make sure to install node and npm first before following this article.

Guide to install node and npm → click me

After it navigate to the folder where you want to create your project. In my case I will navigate to Desktop/programming folder. →

$ cd Desktop/programming

Time to create a new next.js project with typescript. You can do this command in your terminal →

$ npx create-next-app@latest --ts

It will prompt you for your project’s name. In my case I will name it as → nextjs-setup . But you can give it any name you want.

After the packages gets installed, go inside the new project directory with this simple command →

$ cd project-name

Add Tailwind CSS

After you navigate inside the project folder, enter these commands to install tailiwind css & some other required package.

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

After these commands a new file will get created → tailwind.config.js

Open tailwind.config.js file with any text editor you want and do the following

1. Find the line that says→ content: [],
2. Replace the line with this→

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

Now open globals.css file and replace the whole content with these three lines

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

At last open this file → pages/index.tsx and remove this line →

import styles from '../styles/Home.module.css'

You don’t need the line anymore because you have already added tailwind css to your project and you don’t need custom css file anymore.

You can go ahead and also delete this file → styles/Home.module.css

You can verify if tailwind is loaded or not by adding some tailwind classes and running the server.

If you liked the article give it a clap and consider following me. With ❤️ from India 🇮🇳.