How to Start NextJS Project with TypeScript and Tailwind

To get started with a project with NextJS , TypeScript and Tailwind following steps must be achieved.

1. Install NextJS with TypeScript
2. Install Tailwind CSS

Install NextJS with TypeScript

Open terminal or CMD then type:

 npx create-next-app --typescript

Change Directory to your Project Name

cd YOUR_PROJECT_NAME

Install Tailwind CSS

To install Tailwind and its peer-dependencies use following commands:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

After adding tailwind add config files by using following commands:

npx tailwindcss init -p

It will add you tailwind.config.js and postcss.config.js file which is essential for the project to work.

Connecting Tailwind

After installing the whole process, Create a file name tailwind.css in the styles folder (styles/tailwind.css) add following lines:

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

Then Add this lines to pages/_app.tsx connect with the tailwind css file

import '../styles/globals.css'
import '../styles/tailwind.css'
import type { AppProps } from 'next/app'

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

This was basic introduction of how to Start NextJS Project with TypeScript and Tailwind. Subscribe for more.