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

[adjsky]

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):

prettier-plugin-tailwindcss/src/config.ts

Line 200 in 9481dd0

let pkgPath = resolveJsFrom(baseDir, 'tailwindcss')

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.

[8907234]

Tailwindcss v4.0 was fully released yesterday.

@adjsky Is there a quick and dirty fix that devs can use locally until this is patched?

[adjsky]

Tailwindcss v4.0 was fully released yesterday.

@adjsky Is there a quick and dirty fix that devs can use locally until this is patched?

Yes, I've managed to make it work by creating a prettier.config.js that extends my main prettier config from the root:

import config from '../../.prettierrc.json' with { type: 'json' };

export default {
  ...config,
  tailwindStylesheet: './src/app.css',
};

I didn't check if I need tailwindStylesheet (maybe it resolves path automatically, I don't know).

Or you just could install tailwindcss to the workspace root (in case of a pnpm monorepo, just run pnpm add -w tailwindcss).