prettier-plugin-classnames
prettier-plugin-classnames copied to clipboard
plugin does not work
Plug in does not work
Dependency information
"devDependencies": {
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@eslint/js": "^9.33.0",
"@react-router/dev": "^7.7.1",
"@tailwindcss/vite": "^4.1.4",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.0",
"@types/node": "^20",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"eslint": "^9.33.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-react": "^7.37.5",
"globals": "^16.3.0",
"happy-dom": "^18.0.1",
"husky": "^9.1.7",
"msw": "^2.10.5",
"prettier": "3.6.2",
"prettier-plugin-classnames": "^0.8.2",
"prettier-plugin-merge": "^0.8.0",
"prettier-plugin-tailwindcss": "^0.6.14",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3",
"typescript-eslint": "^8.39.1",
"vite": "^6.3.3",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"
}
Prettier configuration
// .prettierrc.js
/** @type {import("prettier").Config} */
export default {
semi: true,
singleQuote: false,
trailingComma: "es5",
arrowParens: "always",
tabWidth: 4,
printWidth: 80,
endOfLine: "lf",
plugins: [
"prettier-plugin-tailwindcss",
"prettier-plugin-classnames",
"prettier-plugin-merge",
],
tailwindAttributes: ["className"],
customAttributes: ["className"],
endingPosition: "absolute",
};
Steps to reproduce
create a react router project with vite pnpm create vite@latest > react > reactRouter
The current behavior
it does not wrap the long className attributes such as : <span className="absolute bottom-[-2.2rem] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm bg-gray-900 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
The expected behavior
<span className="absolute bottom-[-2.2rem] left-1/2 -translate-x-1/2 ..."
Hello! Thanks for reporting the issue!
There is insufficient information about the current behavior. Can you provide more details?