Setup Prettier with ESLint and Tailwind CSS

prettier-setup.md

Steps to setup Prettier with ESLint and Tailwind CSS

Install required packages

npm install prettier prettier-plugin-tailwindcss eslint-config-prettier

OR

yarn add prettier prettier-plugin-tailwindcss eslint-config-prettier

Prettier Config

• Create .prettierrc in the root directory of your project
• Type the following to include the prettier tailwind css plugin and any other formatting rules.

  {
    "tabWidth": 4,
    "semi": false,
    "plugins": ["prettier-plugin-tailwindcss"]
  }

Turn off ESLint rules that might conflict with Prettier

• open .eslintrc.json
• Add "prettier" at the end of the extends array so it can override any other configs

  {
    "extends": ["other-configs", "prettier"]
  }

Format all files in a directory at once with Prettier (or just save to format a file)

npx prettier --write .

OR

yarn prettier --write .