PNPM + postcss + tailwindcss v4.1.18

[Szymon-dziewonski]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

postcss: 8.5.6
vite: 7.2.4
vue: 3.5.25

What version of Node.js are you using?

v22.17.1

What browser are you using?

All browers affected

What operating system are you using?

macOS

Reproduction URL

https://github.com/Szymon-dziewonski/pnpm-postcss-tailwindcss

Describe your issue

I'm a maintainer and one of the creators of SFUI, and now my company would like to releasea new version of our UI component library that uses TailwindCSS v4.

Everything works perfectly when packages are used with npm, yarn, and pnpm(only CSS). However, due to how pnpm operated that create packages globally or locally and link them via node_modules/.pnpm and in workspaces in the root node_modules/.pnpm, postcss seems to have a problem with resolving @import or @plugin.

With the given reproduction repository link we can see that once the repo is checked out and all packages are installed pnpm i (fresh vue create + tailwindcss + tailwindcss/postcss), and run pnpm dev, we can see an error:

Can't resolve '@storefront-ui/tw-plugin-peer-next' in '/Users/szymondziewonski/Projects/pnpm-test/src'

Now, having said that, tailwindcss works as expected without postcss (scss file extension).

This can be easily checked by switching off import in main.ts file, uncomment line 5, and comment line 6.

I believe that tailwindcss/postcss or postcss itself has a problem to resolve node_modules packages in *.scss files.

MORE CONTEXT:
file imported from tailwind.scss -> @import "@storefront-ui/vue/tailwind-config.css"; -> contains @import "@storefront-ui/tailwind-config"; -> and this package contain tailwindcss config with content

@plugin "@storefront-ui/tw-plugin-peer-next";
@plugin "@tailwindcss/typography";
@config "./index.js";

/* Mimics behaviour of removed `future.hoverOnlyWhenSupporte` flag to show hover only on devices with fine pointer (mouse, not finger) */
@custom-variant hover {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @slot;
    }
  }
}
...

Sometimes also for me, postcss throws an error with @import and sometimes randomly with @plugin (@plugin "@storefront-ui/tw-plugin-peer-next";)

In call stack we can see that it all starts with postcss and tailwindcss/postcss

  3  |  @import "tailwindcss";
      at Input.error (/Users/szymondziewonski/Projects/pnpm-test/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/input.js:135:16)
      at Root.error (/Users/szymondziewonski/Projects/pnpm-test/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/node.js:146:32)
      at Object.Once (/Users/szymondziewonski/Projects/pnpm-test/node_modules/.pnpm/@tailwindcss+postcss@4.1.18/node_modules/@tailwindcss/postcss/dist/index.js:10:6911)
      at async LazyResult.runAsync (/Users/szymondziewonski/Projects/pnpm-test/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/lazy-result.js:293:11)

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

🔗 Similar Issues

Related Issues

• error: Cannot apply unknown utility class: wrap-break-word #18954
• Angular: v4.1.13 breaks styling #18963
• fail to run npx tailwindcss init -p #19382
• @tailwindcss/postcss 4.1.6 with @parcel/transformer-postcss: Cannot read properties of undefined (reading 'input') #18082
• Classes are not being generated if using breakpoint #18828
• @source does not scan node_modules #19040
• [v4]vite config eslint error #18437
• Source boundaries not respected in dev mode #18685
• Investigating Inconsistent Config Loading with @tailwindcss/vite #18468
• [@tailwindcss/vite - v4] Content scanning doesn't work with cross-package paths in monorepo #19313

🔗 Related PRs

#18970 - Support Vite Environment API [merged]

👤 Suggested Assignees

• marcospgp
• TobyPerplex
• lizzary
• vincent7128
• vatsake

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false