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 tailwindcss@4.0.0-beta.9.
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).

[8907234]

@adjsky Want to collab? We should try to patch this for the hundreds of thousands of users that will be upgrading to v4 in the coming weeks and months.

[AntonioVentilii]

Not really sure it is related to this, but I am having issues with the sorting myself. I upgraded our project to v4 and the sorting went a bit out. You can check the branch of this PR: https://github.com/dfinity/oisy-wallet/pull/4665/files

Ignore the rest and look at the Svelte files, the sorting is off.

For example: the screens breakpoints (sm:, lg:, xl:) are considered custom classes, even if they are default. So they go first. However, the breakpoints that I created extending tailwind configs are recognized.

[robrelume]

Having the same issue as @AntonioVentilii - at least one breakpoint class is being sorted first.

correct order with Tailwind 3

<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>

changed to this order under Tailwind 4

<h1 className="lg:text-10xl mb-5 text-6xl font-bold md:mb-6 md:text-9xl">{heading}</h1>

[8907234]

Not really sure it is related to this, but I am having issues with the sorting myself. I upgraded our project to v4 and the sorting went a bit out. You can check the branch of this PR: https://github.com/dfinity/oisy-wallet/pull/4665/files

Ignore the rest and look at the Svelte files, the sorting is off.

For example: the screens breakpoints (sm:, lg:, xl:) are considered custom classes, even if they are default. So they go first. However, the breakpoints that I created extending tailwind configs are recognized.

I think that this is tangentially related at most. I checked out the oisy-wallet repo and was able to get the plugin working using the solution from @adjsky. But I couldn't get it to sort as you expected.

[AntonioVentilii]

@8907234 the plugin is already working, but the sorting is wrong: it does not recognizes classes like gap-*, and every breakpoint md: , sm: , etc

Did you test and it was sorting the breakpoints correctly?