prettier-plugin-classnames icon indicating copy to clipboard operation
prettier-plugin-classnames copied to clipboard

plugin does not work

Open Karljoy973 opened this issue 4 months ago • 1 comments

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 ..."

Karljoy973 avatar Aug 24 '25 15:08 Karljoy973

Hello! Thanks for reporting the issue!

There is insufficient information about the current behavior. Can you provide more details?

ony3000 avatar Aug 26 '25 12:08 ony3000