Create NextApp

npx create-next-app@latest --typescript

SettingTypescript

yarn add -D typescript @types/react @types/node

Install Tailwind

Next.js v10 >=
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Next.js v10 <
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

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

TailWind Init

yarn tailwindcss init -p

Setting Tailwind Config

tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}'
  , './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

ESLint

.eslintrc.js
yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort

lintConfig

Prettier

yarn add -D prettier

.prettierrc.js
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  jsxSingleQuote: true,
  semi: true,
  useTabs: false,
  arrowParens: 'always',
  endOfLine: 'auto',
  htmlWhitespaceSensitivity: 'css',
};