Setting Up a Next.js 13 Project with ESLint and Prettier

Step 1: Create a New Next.js Project

pnpm create next-app --typescript

Step 2: Install Prettier

pnpm add -D prettier@2.8.8

Step 3: Set up Prettier and ESLint without Conflicts

pnpm add -D eslint-config-prettier

.eslintrc.js or .eslintrc.json

{
  "extends": ["next", "prettier"]
}

Step 4: Install and Configure Tailwind CSS

pnpm add -D tailwindcss postcss autoprefixer

pnpm tailwindcss init -p

tailwind.config.j

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',

    // Or if using \`src\` directory:
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

global.css

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

Step 6: Automatically Sort Tailwind Classes with Prettier

pnpm add -D prettier-plugin-tailwindcss

touch .prettierrc.json

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Step 7: Configure scripts

"scripts" : {
     "format": "prettier --check --ignore-path .gitignore .",
     "format:fix": "prettier --write --ignore-path .gitignore ."
}