pnpm tailwindcss vs pnpx @tailwindcss/cli

[LoryPelli]

Why do they both work for tailwind v4 to build from CLI?

[LoryPelli]

instead pnpm @tailwindcss/cli doesn't work

[LoryPelli]

they need to be both installed in both cases

[LoryPelli]

Thanks @apteryxxyz for replying on discord and for solving my doubts!

[wongjn]

We can look at the difference between pnpm <binary> and pnpx <package-name>.

pnpm <binary> (alias of pnpm exec <binary>)

As per the documentation:

Execute a shell command in scope of a project.

node_modules/.bin is added to the PATH, so pnpm exec allows executing commands of dependencies.

This means that this attempts to execute a binary in your node_modules/.bin folder. The binary built from the @tailwindcss/cli package is named talwindcss:

tailwindcss/packages/@tailwindcss-cli/package.json

Lines 18 to 20 in 5a77c9d

	"bin": {
	"tailwindcss": "./dist/index.mjs"
	},

Hence why pnpm tailwindcss works. pnpm @tailwindcss/cli does not work since @tailwindcss/cli is not the name of the binary.

pnpx <package-name> (alias of pnpm dlx <package-name>)

As per the documentation:

Fetches a package from the registry without installing it as a dependency, hotloads it, and runs whatever default command binary it exposes.

As per previous, the default binary is talwindcss and so this is executed by this command. Note, the @tailwindcss/cli package does not need to be installed to run, but you will get a "Can't resolve 'tailwindcss'" error when trying to compile a Tailwind CSS file.