Cannot use tailwind v4 Alpha 21 onwards.

[ranseur92]

Package version

6.14.1

Describe the bug

Cannot use Tailwind alpha 20 onwards, something to do with hot-hook.

tailwindlabs/tailwindcss#15004

Simply run the reproduction package in dev mode and it won't start.

Reproduction repo

https://github.com/ranseur92/twind-test

Apologies if this is in the wrong place, wasn't sure whether to put it here, or in hot-hook or whatnot.

[thetutlage]

Wait for them for release the final version and please share exactly what the bug is and don't leave it on us to figure out that too for an alpha release 🙂

[ranseur92]

Wait for them for release the final version and please share exactly what the bug is and don't leave it on us to figure out that too for an alpha release 🙂

Apolagies, The information regarding the bug was in the issue I linked.

The error that I get is:

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: D:/JS/twind-test): [Error] Loading PostCSS Plugin failed: The URL must be of scheme file

(@D:\JS\twind-test\postcss.config.cjs)
Error: Loading PostCSS Plugin failed: The URL must be of scheme file

They managed to pinpoint the crash to the hot-hook library trying to parse a data: URI as a file import here: https://github.com/Julien-R44/hot-hook/blob/main/packages/hot_hook/src/loader.ts#L213

When debugged, this is the context the module has:

{
  specifier: 'file:///Users/philipp/dev/twind-test/node_modules/.pnpm/@tailwindcss+node@file+..+..+tailwindcss+dist+tailwindcss-node.tgz/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs',
  context: {
    conditions: [ 'node', 'import', 'node-addons' ],
    importAttributes: [Object: null prototype] {},
    parentURL: 'data:'
  }
}

They have just launched beta-1, which still has the same issue.

[thetutlage]

Yeah. We will wait for the final release to be out before we start looking into things :)

[Julien-R44]

I took some time to investigate because it looked like a bug in hot-hook and it was. Fixed with hot-hook@0.4.0 !