Skip to content

Instantly share code, notes, and snippets.

@SAMURAii-7
Last active September 24, 2024 21:41
Show Gist options
  • Save SAMURAii-7/62efd5ba5fcd78bcab223626a33c5eaa to your computer and use it in GitHub Desktop.
Save SAMURAii-7/62efd5ba5fcd78bcab223626a33c5eaa to your computer and use it in GitHub Desktop.
Setup Prettier with ESLint and Tailwind CSS

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 .
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment