nivethan-me/README.md

## README.md

      
    Raw
  

              README.md
            
          
     Setup Next.js 13 project with Eslint + Prettier 


Create a fresh new Next js project. https://nextjs.org/docs/getting-started#automatic-setup
pnpm create next-app --typescript 


install prettier
pnpm add -D prettier


Use eslint-config-prettier to setup prettier and eslint without conflicts https://nextjs.org/docs/getting-started#automatic-setup
pnpm add -D eslint-config-prettier


Then, add prettier to your existing ESLint config
{
  "extends": ["next", "prettier"]
}


Install TailwindCSS on your Next.js project https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS
pnpm add -D tailwindcss postcss autoprefixer


Run the init command to generate both tailwind.config.js and postcss.config.js
pnpm tailwindcss init -p


Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
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: [],
}


Add the @tailwind directives for each Tailwind’s layers to your globals.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;


To automatically sort tailwind classes with prettier https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
pnpm add -D prettier-plugin-tailwindcss


Create a .prettierrc.json file in your root directory
touch .prettierrc.json


Add the installed plugin to your .prettierrc.json config file
{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]

}