Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order

[muke5hy]

Failed to compile.

01:38:16.130 |   01:38:16.130 | ./components/card.tsx 01:38:16.130 | 27:14 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order 01:38:16.130 |   01:38:16.130 | ./components/ui/command.tsx 01:38:16.131 | 32:18 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order 01:38:16.131 |   01:38:16.131 | info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules 01:38:16.248 | error Command failed with exit code 1. 01:38:16.249 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 01:38:16.279 | Error: Command "yarn run build" exited with 1 01:38:16.553 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

[jonathanquaade]

You can use the eslint-plugin-tailwindcss to automatically fix that classnames order error. @shadcn already has the plugin installed

Just modify the lint script in package.json like this:

"scripts": {
  "lint": "next lint --fix",
},

And then run pnpm run lint. That should fix the classname ordering

[Manubi]

I think the problem is, the eslint plugin doesn't follow the same rules as the tailwindcss vscode extension and the prettier plugin.

[leonardomjq]

Any solution to this? The problem is indeed as @Manubi commented.

I already have this:

"lint": "next lint", "lint:fix": "next lint --fix",

[imaprototype]

You can also add the following line to your package.json

"lint:fix": "next lint --fix"

and then execute

npm run lint:fix