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

thanks!

Thanks!

Thanks! 🍺

Thanks 🔥

thanks

Thanks

tailwind sorting plugin is now incompatible with prettier version 3.0.0 so if you want to use it you have to use prettier version 2.8.8

tailwind sorting plugin is now incompatible with prettier version 3.0.0 so if you want to use if you have to use prettier version 2.8.8

Thank you for the notification. They are currently addressing the compatibility issue with Prettier v3.0 on their repo. Once the problem is resolved, I will provide an update. In the meantime, I recommend downgrading to prettier v2.8.8.

Update:

They just released v0.4.0 with support for both Prettier v2.x and v3.0

You can also check the release notes here

Thanks

thanks from the bottom of my heart 💖

Thanks <3

really really usefull I was stuck about 5 hours

Thanks!

Thanks 😍

Thanks

thanks !

Thanks! 😍

Thanks! it helped a lot

Thanks!

thanks 🚀

Thanks

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

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