You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
prettier-plugin-tailwindcss formats a certain file differently when you format all files and only that file. In the reproduction example, there are two components: ButtonSocialApple and ButtonSocialFacebook which have similar tailwind classes.
// src/app/button-social/button-social.apple.tsx// ...exportfunctionButtonSocialApple({ children }: ButtonSocialAppleProps){return(<divclassName="[--dr-social-button-color-bg-brand:#000] [--dr-social-button-color-bg-brand_hover:#000] [--dr-social-button-color-fg_on-brand:#fff]">{children}</div>);}// src/app/button-social/button-social.apple.tsx// ...exportfunctionButtonSocialFacebook({ children }: ButtonSocialFacebookProps){return(<divclassName="[--dr-social-button-color-bg-brand:#1877F2] [--dr-social-button-color-bg-brand_hover:#0C63D4] [--dr-social-button-color-fg_on-brand:#fff]">{children}</div>);}
When you format all files by running:
npx prettier --write .
It produces one result for ButtonSocialFacebook:
exportfunctionButtonSocialFacebook({ children }: ButtonSocialFacebookProps){return(<divclassName="[--dr-social-button-color-fg_on-brand:#fff] [--dr-social-button-color-bg-brand:#1877F2] [--dr-social-button-color-bg-brand_hover:#0C63D4]">{children}</div>);}
What version of
prettier-plugin-tailwindcss
are you using?v0.5.11
What version of Tailwind CSS are you using?
v3.4.1
What version of Node.js are you using?
v20.10.0
What package manager are you using?
npm, pnpm
What operating system are you using?
Windows (WSL)
Reproduction URL
https://github.com/lesha1201/tailwind-prettier-plugin-inconsistent-sorting-issue
Describe your issue
button-social-facebook.tsx.-.tailwind-inconsistent-sorting-issue.WSL_.Ubuntu.-.Visual.Studio.Code.2024-02-08.14-33-06.mp4
prettier-plugin-tailwindcss
formats a certain file differently when you format all files and only that file. In the reproduction example, there are two components:ButtonSocialApple
andButtonSocialFacebook
which have similar tailwind classes.When you format all files by running:
npx prettier --write .
It produces one result for
ButtonSocialFacebook
:When you format only
ButtonSocialFacebook
:It produces a different result:
However, when you remove
ButtonSocialApple
component, it formatsButtonSocialFacebook
consistently.The text was updated successfully, but these errors were encountered: