To connect Next.js with Tailwind and Typescript, you must go through several documentation pages on different websites. This guide saves your time and provides all actions you need to do to get your environment up and running.

1. Create new Next.js project

   # Run:
   npx create-next-app new-app
   # or
   yarn create next-app new-app
   

   After installation is complete, run cd new-app to enter the project folder. Reference source

2. Install Tailwind

   # Run:
   npm install tailwindcss@latest postcss@latest autoprefixer@latest
   # or
   yarn add tailwindcss@latest postcss@latest autoprefixer@latest
   

   After the installation is complete, we need to generate additional config files:

   # Run:
   npx tailwindcss init -p
   

   To remove unused styles in the production build:

   // Replace your tailwind.config.js with:
   module.exports = {
   purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
   }
   

   The final step is to import tailwind to CSS:

   /* Add this code at the top of ./styles/globals.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

   Reference source

3. Setup Typescript

   # Run:
   npm install -D typescript @types/react @types/node
   # or
   yarn add --dev typescript @types/react @types/node
   

   After installation is complete, run touch tsconfig.json to create a file to store Typescript configuration.

   # Rename:
   ./pages/_app.js # to ./pages/_app.tsx
   ./pages/index.js # to ./pages/index.tsx
   ./pages/api/hello.js # to ./pages/api/hello.ts
   

   The final step is to start the environment. On the first run, Next.js will populate tsconfig.json with a default Typescript configuration, so you don't have to worry about it.

   # Run:
   npm run dev
   # or
   yarn dev
   

   Reference source

That's it! Now you have a fully functional running environment on http://localhost:3000 for building your amazing project 😊