prettier-plugin-tailwindcss

prettier-plugin-tailwindcss copied to clipboard

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!