Setup a Next.js 13 project with Eslint + Prettier with automatic tailwind class sorting

README.md

Setup Next.js 13 project with Eslint + Prettier

1. Create a fresh new Next js project. https://nextjs.org/docs/getting-started#automatic-setup

   pnpm create next-app --typescript 
   

2. install prettier

   pnpm add -D prettier
   

3. 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
   

4. Then, add prettier to your existing ESLint config

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

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

   1. Install Tailwind CSS

      pnpm add -D tailwindcss postcss autoprefixer
      

   2. Run the init command to generate both tailwind.config.js and postcss.config.js

      pnpm tailwindcss init -p
      

   3. 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: [],
      }
      

   4. Add the @tailwind directives for each Tailwind’s layers to your globals.css file.

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

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

   pnpm add -D prettier-plugin-tailwindcss
   

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

   touch .prettierrc.json
   

8. Add the installed plugin to your .prettierrc.json config file

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

This is great thanks. I was looking for a solution like this

Thanks!

how to make eslint highlight an issue if there is no semicolon? currently when semi: true in my .prettierrc eslint does not show any issues if not semicolon

@Nivethan-Ar thanks

Did you solve this problem?
Same issue for me.

Thanks

thanks!

I confess that it was difficult to come back here after you changed your nickname haha

I confess that it was difficult to come back here after you changed your nickname haha

Apologies for the confusion caused by my username change! consider starring the gist, then you can easily access it through your starred list for example - https://gist.github.com/kayotimoteo/starred