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