Fix: prettier-plugin-tailwindcss Not Working in VSCode on Save

Fix: prettier-plugin-tailwindcss Not Working in VSCode on Save

Are you struggling to make the prettier-plugin-tailwindcss work as expected in Visual Studio Code (VSCode) when you hit save? This issue is common and often boils down to misconfigurations. In this guide, we’ll walk through the steps to resolve it effectively.

Problem

You’ve installed prettier-plugin-tailwindcss, and while it works fine when running Prettier manually (e.g., npx prettier --write index.html), it doesn’t automatically sort your Tailwind classes when saving files in VSCode.

Solution

Here are the steps to ensure your setup works correctly:

1. Install Prettier and the Tailwind Plugin

Ensure you have the necessary packages installed in your project:

npm install -D prettier prettier-plugin-tailwindcss

2. Configure .prettierrc.json

Update your Prettier configuration file to include the Tailwind plugin:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

3. Set the Default Formatter in VSCode

In VSCode, you need to set Prettier as your default formatter:

1. Open your settings (Ctrl + , or Cmd + , on Mac).
2. Search for Default Formatter.
3. Set it to esbenp.prettier-vscode.

Alternatively, update your workspace settings directly:

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

4. Ensure Correct Plugin Order

If you’re using multiple Prettier plugins, the order in which plugins are declared in the plugins array matters. Ensure prettier-plugin-tailwindcss is at the end:

{
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

5. Check File Associations

Make sure the files you’re working on are associated with Prettier. For example, include the following in your settings to ensure all .jsx and .html files are formatted:

{
  "prettier.documentSelectors": ["*.jsx", "*.html"]
}

6. Verify Tailwind Configuration Path

If your Tailwind config file is not at the default location, specify its path in the Prettier config:

{
  "tailwindConfig": "./path-to-your-tailwind-config.js"
}

7. Check for Invalid HTML

Prettier skips formatting if there are syntax errors. Open the VSCode terminal (Ctrl + ⇧ + U on Windows/Linux, Cmd + ⇧ + U on Mac) to check for errors.

Tips

• Disable other conflicting extensions that might override formatting behavior.
• If the problem persists, try deleting and reinstalling your node_modules directory and package-lock.json file:

rm -rf node_modules package-lock.json
npm install

FAQs

1. Why is Prettier not sorting Tailwind classes on save?

Ensure that editor.formatOnSave is enabled and prettier-plugin-tailwindcss is listed in your Prettier config.

2. Do I need to install any specific VSCode extensions?

Yes, make sure you’ve installed the Prettier - Code formatter extension.

3. Does the order of plugins in .prettierrc.json matter?

Yes, the order matters. Always place prettier-plugin-tailwindcss at the end of the plugins array.

4. Why isn’t my .prettierrc file being recognized?

Ensure the file is in the root of your project and named correctly. Also, check your VSCode settings to ensure the config path is accurate.