Next.js 13 with Prettier

Step 1: Create a New Next.js Project

pnpm create next-app

Step 2: Install Prettier

pnpm add -D prettier

Step 3: Set up Prettier and ESLint without Conflicts

pnpm add -D eslint-config-prettier

.eslintrc.json

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

Step 4: Install and Configure Tailwind CSS

pnpm add -D tailwindcss postcss autoprefixer
 
pnpm tailwindcss init -p

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

"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 ." }