Problem with eslint and prettier-plugin-tailwindcss [Prettier Plugin]

[YuliyaMinsk]

trafficstars

What version of prettier-plugin-tailwindcss are you using?

v0.5.11

What version of Tailwind CSS are you using?

v3.3.0

What version of Node.js are you using?

v20.11.0

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

Hello everyone,

I've added to tailwind config new values - small, medium, large.

....
borderRadius: {
      none: '0',
      small: '1rem',
      medium: '1.5rem',
      large: '2rem',
      full: '9999px',
    },
...

Now, when I add them to my files, the plugin sets the order as follows: rounded-large h-[462px] w-[905px] bg-skin-fill-card px-14 py-20

however, when I run husky to test my code before committing, I get this error. How to fix it?

9:21 error Replace "rounded-large·h-[462px]·w-[905px]" with "h-[462px]·w-[905px]·rounded-large" prettier/prettier

I use the following devDependencies:

"devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^5.49.0",
    "@typescript-eslint/parser": "^5.49.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "14.1.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-config-standard-with-typescript": "^34.0.0",
    "eslint-formatter-codeframe": "^7.32.1",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.6.1",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.0",
    "postcss": "^8",
    "prettier": "^3.2.4",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }

Config for prettier:

{
"printWidth": 100,
"proseWrap": "always",
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "auto",
"plugins": ["prettier-plugin-tailwindcss"]
}

Thanks a lot for any help!

[dani-mp]

I'm having the same problem.

[dani-mp]

Seems related to https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/244.

[thecrypticace]

This seems to me like your tailwind config isn't being picked up in some scenarios. Can you provide a reproduction?

[joao-vitor-felix]

I was facing this issue today, for some reason eslint-plugin-prettier was throwing an error like yours is. I also noticed that when I save a file, prettier-plugin-tailwindcss formats the classes, but running lint-staged with a prettier --write changed the order of the classes, which I don't know why. So I just removed prettier-plugin-tailwindcss and eslint-plugin-prettier, then I put eslint-plugin-tailwindcss instead.

[dani-mp]

I could reproduce this now a couple of times.

The problem seems to be on vscode side. It happens when the tailwind classes are changed and saved without re-triggering vscode's format on save (think about finding and replacing the name of an animation in a refactor, or something like that). When this happens and you run the formatter via the cli, vscode can report that the formatting is wrong, when in reality it is correct. When you save the file, it formats it how it thinks it's correct, but now if you run the formatter again via the cli, it'll correct it. Once you understand that vscode is wrong here, reloading it (running reload window command, or killing and opening the app again) fixes the issue on vscode side.

[SugarDarius]

Hi @dani-mp 👋🏻

I had the same issue and you're right. The best option on my side was to kill vscode completely and open it again as reloading with the window command didn't had any effect.

Thanks 🙏🏻

[alcpereira]

If you are using eslint-config-prettier you probably don't want to use it with eslint-plugin-prettier, this surely will have some side effects (or layer of indirection where things may break according to the docs)

[viktoriabakun]

Thank you @SugarDarius

Same with WebStorm. Just close it completely and open, it will show you then that you have to reorder classes in the right way

[AbhishekJadhav2002]

Restarting ESLint Server solved the eslint error. Press ctrl + p and search >ESLint: Restart ESLint Server

[thecrypticace]

Generally, for vscode, if things aren't working right you can try reloading the window. (technically just the extension host should be enough).

If you're still having issues in an IDE and not in the CLI please open a new issue with a reproduction and environment details — thanks!