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

Question

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

YuliyaMinsk opened this issue 8 months ago · 8 comments

YuliyaMinsk commented 8 months ago

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!

Answer 1 · 2024-02-23T19:14:31.000Z

I'm having the same problem.

Answer 2 · 2024-02-23T19:15:25.000Z

Seems related to #244.

Answer 3 · 2024-03-07T19:36:38.000Z

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

Answer 4 · 2024-03-22T01:54:04.000Z

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.

Answer 5 · 2024-03-25T11:42:49.000Z

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.