How to create Next Js project with Typescript and tailwindcss

We can create next app with yarn include –typescript in the end if we want tsx files.

yarn create next-app rentalapp --typescript
cd rentalapp
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

by executing npx tailwind creates 2 config files

tailwind.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

and finally we should insert bellow snippet into globals.css

styles/globals.css

1
2
3

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

yarn dev