Brand new hydrogen project issue with VITE import of Tailwindcss v4

[IngoVals]

What is the location of your example repository?

https://github.com/IngoVals/drangey

EDIT: Repo is now private, if needed I can create a new one from that commit, just @ me.

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.7

What version of Remix are you using?

2.12.1([email protected]([email protected]))([email protected])([email protected])

Steps to Reproduce

Fetch repo, need to have PNPM, possibly any package manager has same error, not checked.

pnpm i
pnpm shopify hydrogen link
pnpm dev

Route to localhost:3000

All seems fine but error reported in console.

Unable to resolve `@import "tailwindcss"` from /home/ingovals/projects/drangey/app/styles
10:11:43 AM [vite] Internal server error: [postcss] ENOENT: no such file or directory, open 'tailwindcss'
  Plugin: vite:css
  File: /home/ingovals/projects/drangey/app/styles/tailwind.css?direct:undefined:NaN
      at async open (node:internal/fs/promises:639:25)
      at async Object.readFile (node:internal/fs/promises:1242:14)
      at async Object.load (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36797:25)
      at async loadImportContent (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:844:19)
      at async Promise.all (index 0)
      at async resolveImportId (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:800:27)
      at async parseStyles$1 (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:708:5)
      at async Object.Once (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:965:22)
      at async LazyResult.runAsync (/home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:261:11)
      at async compileCSS (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36860:21)
      at async TransformPluginContext.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36141:11)
      at async PluginContainer.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:49033:18)
      at async loadAndTransform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:51866:27)
[vite] Internal Server Error
[postcss] ENOENT: no such file or directory, open 'tailwindcss'
    at async open (node:internal/fs/promises:639:25)
    at async Object.readFile (node:internal/fs/promises:1242:14)
    at async Object.load (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36797:25)
    at async loadImportContent (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:844:19)
    at async Promise.all (index 0)
    at async resolveImportId (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:800:27)
    at async parseStyles$1 (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:708:5)
    at async Object.Once (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:965:22)
    at async LazyResult.runAsync (/home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:261:11)
    at async compileCSS (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36860:21)
    at async TransformPluginContext.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36141:11)
    at async PluginContainer.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:49033:18)
    at async loadAndTransform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:51866:27)

Expected Behavior

Brand new install of Hydrogen, no changes, using tailwind v4 Alpha given in CLI options.

Run project and everything works

Actual Behavior

The tailwind.css file reports error, VITE doesn't seem to be able to resolve @import 'tailwindcss';

[IngoVals]

Issue seems to be related to PNPM.

Tried

rm -rf node_modules/
npm i

And did not have the same issues

[IngoVals]

It seems to be an issue with missing [email protected] package.

@tailwind/vite does not include it as a peer dependency, but tries to resolve like it is a regular dependency. I'm thinking that since Yarn and NPM hoist all packages up it works, but in the case of PNPM it does not.

Since I think tailwind will probably became a peer dep in a future release anyways the fix here is just to add "tailwindcss": "4.0.0-alpha.17" under devDependencies in the template.