Upstream tailwindcss 4.0.0-alpha.25 is broken

[jmooring]

This works:

  "devDependencies": {
    "@tailwindcss/cli": "4.0.0-alpha.24",
    "tailwindcss": "4.0.0-alpha.24"
  },

This fails:

  "devDependencies": {
    "@tailwindcss/cli": "4.0.0-alpha.25",
    "tailwindcss": "4.0.0-alpha.25"
  },

Alpha 25 was released yesterday:
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.25

I am suspicious of this change:
tailwindlabs/tailwindcss#14446

To reproduce:

git clone https://github.com/bep/hugo-testing-tailwindcss-v4
cd hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/
npm install
hugo

build log

Start building sites … 
hugo v0.135.0-DEV-0ea796dad11e5d9f5b4c96a8e65f8272c9e4ccb5+extended linux/amd64 BuildDate=2024-09-22T14:53:11Z

Total in 315 ms
Error: error building site: TAILWINDCSS: failed to transform "/css/styles.css" (text/css): /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:564
			const error = new Error("Can't " + message);
			              ^

Error: Can't resolve 'tailwindcss' in '/home/jmooring/temp/hugo-testing-tailwindcss-v4'
    at finishWithoutResolve (/home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
    at /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:656:15
    at /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/jmooring/temp/hugo-testing-tailwindcss-v4/tailwindcss-cli-simple/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) {
  details: "resolve 'tailwindcss' in '/home/jmooring/temp/hugo-testing-tailwindcss-v4'\n" +
    '  Parsed request is a module\n' +
    '  No description file found in /home/jmooring/temp/hugo-testing-tailwindcss-v4 or above\n' +
    '  resolve as module\n' +
    "    /home/jmooring/temp/hugo-testing-tailwindcss-v4/node_modules doesn't exist or is not a directory\n" +
    "    /home/jmooring/temp/node_modules doesn't exist or is not a directory\n" +
    "    /home/jmooring/node_modules doesn't exist or is not a directory\n" +
    "    /home/node_modules doesn't exist or is not a directory\n" +
    "    /node_modules doesn't exist or is not a directory"
}

Node.js v20.11.1

I can get 4.0.0-alpha.25 to work by adding an explicit mount:

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'node_modules/tailwindcss'
target = 'assets/css/tailwindcss'

And then changing the initial import statement from:

@import "tailwindcss";

To:

@import "tailwindcss/index.css";

Given that we can make this work, perhaps we should address this in the documentation, the example repository, and in the integration test.

[bep]

Given that we can make this work, perhaps we should address this in the documentation, the example repository, and ...

I suggest adding a note with a reference to THIS issue and nothing more. We need to fix this and I don't want the above slightly ugly workaround somehow be how it's done around the web; then we fix it and the workaround stops working ... Also, this is alpha software.

[bep]

Seems like the TailwindCLI's reading from stdin is broken in the latest alpha.

This fails:

tailwindcss  --input=- -o /Users/bep/dump/foo.css < assets/css/styles.css  

This works:

tailwindcss  -i assets/css/styles.css -o /Users/bep/dump/foo.css

I will try to find a workaround.

[bep]

#12881 works for me; if you can take it for a spin and confirm, I can make it into a patch release, as I know there are many Hugo alpha tailwind users out there.

Also, I will create a upstream bug.

[bep]

Upstream issue: tailwindlabs/tailwindcss#14521

[jmooring]

This was fixed upstream with tailwindcss 4.0.0-alpha.26.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.