Next.js 13 with prettier

Step 1: New Next.js Project

pnpm create next-app@latest

Step 2: Install Prettier

pnpm add -D prettier

Step 3: Prettier + ESLint

pnpm add -D eslint-config-prettier

.eslintrc.json

{ "extends": ["next/core-web-vitals", "prettier"] }

Step 4: Install Tailwind CSS

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

tailwind.config.js

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

global.css

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

Step 5: Sort Tailwind Classes

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 6: Scripts

package.json

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

Step 7: Test

components/Test.jsx

export default function Test() {
  return (
    <div className="bg-gray-800 text-white p-6 rounded-lg shadow-md flex justify-center">
      <h1 className="text-2xl font-bold">Prettier Works!</h1>
    </div>
  );
}