tailwindcss v4 support

[arafays]

By submitting this pull request, I confirm that my contribution is made under the terms of the MIT license.

Problem/Feature

Support for tailwindcss v4

Checklist

• I have self-reviewed the changes being requested
• I have updated the documentation (check issue ticket 📋Update documentation if the PR introduces a new feature!📋 #218)

[arafays]

go-blueprint/cmd/program/program.go

Lines 890 to 894 in 9e33987

	fmt.Println("Installing Tailwind dependencies (using cache if available)...")
	cmd := exec.Command("npm", "install",
	"--prefer-offline",
	"--no-fund",
	"tailwindcss", "postcss", "autoprefixer")

I am worried about the --prefer-offline tag as tailwindcss v4 is fairly new should I remove it?

[arafays]

I think installing @tailwindcss/vite that has a dependency of needing tailwind v4 will make it force install v4+ so maybe we are good to go using --prefer-offline

[arafays]

For people who have new tailwind cli the install will fail as seen in the logs as tailwindcss init has been removed

0 verbose cli /home/arafay/.local/share/mise/installs/node/23.6.1/bin/node /home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/bin/npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 silly config load:file:/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/npmrc
4 silly config load:file:/home/arafay/projects/arafays/go-blueprint/somettin/frontend/.npmrc
5 silly config load:file:/home/arafay/.npmrc
6 silly config load:file:/home/arafay/.local/share/mise/installs/node/23.6.1/etc/npmrc
7 verbose title npm exec tailwindcss init -p
8 verbose argv "exec" "--prefer-offline" "--" "tailwindcss" "init" "-p"
9 verbose logfile logs-max:10 dir:/home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-
10 verbose logfile /home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-debug-0.log
11 silly logfile start cleaning logs, removing 1 files
12 silly logfile done cleaning log files
13 silly packumentCache heap:4345298944 maxSize:1086324736 maxEntrySize:543162368
14 verbose stack Error: could not determine executable to run
14 verbose stack     at getBinFromManifest (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/node_modules/libnpmexec/lib/get-bin-from-manifest.js:17:23)
14 verbose stack     at exec (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/node_modules/libnpmexec/lib/index.js:202:15)
14 verbose stack     at async Npm.exec (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/lib/npm.js:207:9)
14 verbose stack     at async module.exports (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/lib/cli/entry.js:74:5)
15 verbose pkgid [email protected]
16 error could not determine executable to run
17 verbose cwd /home/arafay/projects/arafays/go-blueprint/somettin/frontend
18 verbose os Linux 6.12.10-arch1-1
19 verbose node v23.6.1
20 verbose npm  v10.9.2
21 verbose exit 1
22 verbose code 1
23 error A complete log of this run can be found in: /home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-debug-0.log

[Ujstor]

I fixed Tailwind to v3.4.10 because that was the issue when it is used with HTMX. I saw open issues in tailwind repo, and the simplest solution for now was just using the older version.

#371

On the React side, I added --prefer-offline because I experienced an issue with project generation - it took more than 10 minutes, so I introduced prefer-offline when there is a local cache. If this is not a good practice, we can remove the flag.

[arafays]

For people who have new tailwind cli the install will fail as seen in the logs as tailwindcss init has been removed

0 verbose cli /home/arafay/.local/share/mise/installs/node/23.6.1/bin/node /home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/bin/npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 silly config load:file:/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/npmrc
4 silly config load:file:/home/arafay/projects/arafays/go-blueprint/somettin/frontend/.npmrc
5 silly config load:file:/home/arafay/.npmrc
6 silly config load:file:/home/arafay/.local/share/mise/installs/node/23.6.1/etc/npmrc
7 verbose title npm exec tailwindcss init -p
8 verbose argv "exec" "--prefer-offline" "--" "tailwindcss" "init" "-p"
9 verbose logfile logs-max:10 dir:/home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-
10 verbose logfile /home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-debug-0.log
11 silly logfile start cleaning logs, removing 1 files
12 silly logfile done cleaning log files
13 silly packumentCache heap:4345298944 maxSize:1086324736 maxEntrySize:543162368
14 verbose stack Error: could not determine executable to run
14 verbose stack     at getBinFromManifest (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/node_modules/libnpmexec/lib/get-bin-from-manifest.js:17:23)
14 verbose stack     at exec (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/node_modules/libnpmexec/lib/index.js:202:15)
14 verbose stack     at async Npm.exec (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/lib/npm.js:207:9)
14 verbose stack     at async module.exports (/home/arafay/.local/share/mise/installs/node/23.6.1/lib/node_modules/npm/lib/cli/entry.js:74:5)
15 verbose pkgid [email protected]
16 error could not determine executable to run
17 verbose cwd /home/arafay/projects/arafays/go-blueprint/somettin/frontend
18 verbose os Linux 6.12.10-arch1-1
19 verbose node v23.6.1
20 verbose npm  v10.9.2
21 verbose exit 1
22 verbose code 1
23 error A complete log of this run can be found in: /home/arafay/.npm/_logs/2025-01-29T16_47_57_873Z-debug-0.log

I meant this to be the current behavior I have fixed it in the pr

• Tailwind cli we are going to download the the latest cli and that you are talking about and we dont need to use the init as the new tailwindcss only needs the .css @import "tailwindcss" so we are good to go
• for vite I have added the template that I think we can use for the vite + tailwind config and removed the tailwind.config and vite will handle the css generation.

and I was worried about the --prefer-offline but for vite we need to install @tailwindcss/vite and its dependencies include tailwindcss v4 as it is a new package introduced in v4 it will technically install the latest or at least v4 tailwindcss so I think we are good to go

@Ujstor

[Ujstor]

Thanks for the info, I will try to review and test the PR tomorrow.