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

Published 20 hours ago • verified publisher icon tailwindlabs

v4 classes are not sorted in monorepo where tailwindcss is not installed in package with `.prettierrc`

Open adjsky opened this issue 10 months ago • 8 comments

What version of prettier-plugin-tailwindcss are you using?

v0.6.9

What version of Tailwind CSS are you using?

v4.0.0-beta.9

What version of Node.js are you using?

v23.1.0

What package manager are you using?

pnpm v9.12.3

What operating system are you using?

macOS Version 15.1.1 (24B91)

Reproduction URL

https://github.com/adjsky/tailwind-prettier-monorepo-bug

  1. Open website/index.html.
  2. Try to format the file, see rotate-360 is not sorted.
  3. Run pnpm add -w [email protected].
  4. Try to format the file, see rotate-360 is sorted.
  5. Remove tailwindcss from the root package.json.
  6. Apply website .prettierrc_ by removing underscore.
  7. Try to format the file, see rotate-360 is still sorted.

Describe your issue

Plugin does not sort new classes (rotate-360, h-54.5, ...) in a monorepo setup, where tailwindcss is installed in separate packages, but there is only one .prettierrc in the monorepo root.

As i see from the code, the plugin tries to import tailwindcss package from the base dir (where the prettier config is located): https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/9481dd0c6ac758a5210b5298b0b4771fdce50c51/src/config.ts#L200

but it fails (since there is no tailwindcss package in the root) and falls back to the v3 mode.

This can be fixed by recursively resolving tailwindcss in each package from the input file path to the baseDir, or at least the current behavior could be documented.

I can open PR with the fixes, if you are welcome.

adjsky avatar Jan 14 '25 12:01 adjsky