Standalone CLI build fails with first-party plugin in config when using @plugin directive

[ekron]

What version of Tailwind CSS are you using?

tailwindcss v4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

Running the command line tool via Make.

The CLI tool is: https://github.com/tailwindlabs/tailwindcss/releases/download/v4.0.0/tailwindcss-linux-arm64"

It's inside VSCode dev container.

The previous version of CLI tool worked fine.

What version of Node.js are you using?

n/a

What browser are you using?

n/a

What operating system are you using?

macOS, but running linux in a dev container in VSCode.

Reproduction URL

n/a

Describe your issue

Thanks for your work on v4, appreciate it.

I have been using the stand alone CLI.

While upgrading to v4 of the CLI, I assumed this would load the first party plugins in my tailwind-input.css:

@import "tailwindcss";

@plugin "@tailwindcss/forms"
@plugin "@tailwindcss/typography"

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  ... etc

When I try to run the standalone CLI I get this error:

tailwindcss -i ./tailwind-input.css -o ./public/style.css --watch
Error: Can't resolve '@tailwindcss/forms" @plugin "@tailwindcss/typography" .loadin' in '/workspaces/app'

If I remove the plugin directives everything seems to work:

tailwindcss -i ./tailwind-input.css -o ./public/style.css --watch
sh: 1: watchman: not found
≈ tailwindcss v4.0.0

Done in 190ms
Done in 20ms
Done in 14ms
Done in 1ms
Done in 276µs
Done in 18ms
Done in 12ms
Done in 118ms
Done in 13ms
Done in 815µs
Done in 126µs
Done in 9ms
Done in 91ms
Done in 1ms

(Apart from that sh: 1: watchman: not found.)

Using the v3 CLI tool and my old tailwind.config,js the plugins config works fine:

 plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],

So I read the docs:

Use the @plugin directive to load a legacy JavaScript-based plugin:

@plugin "@tailwindcss/typography";

The @plugin directive accepts either a package name or a local path.

The docs for the stand alone CLI (prior to v4) say::

We've even bundled the latest versions of all of our first-party plugins, so if you want to use them in your project, just require them in your tailwind.config.js file like you would in a Node-based project:

module.exports = { // ... plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],};

You get all the power of our standard npm-distributed CLI in a convenient, portable package — no dependencies required.

Has this the "no dependencies required" changed, or am I missing something? Sorry if this has already been raised as an issue.

Thank you.

[froggy1014]

• https://tailwindcss.com/docs/upgrade-guide#using-tailwind-cli

it works fine as soon as I swap it to @tailwind/cli package

[philipp-spiess]

Hey! I think you're missing a semicolon after the @plugin rule. Can you try this instead?

@import "tailwindcss";

@plugin "@tailwindcss/forms"; /* <- semicolon here */
@plugin "@tailwindcss/typography"; /* <- semicolon here */

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  /* … */
}

I think the error message here is super confusing though, we should for sure improve that experience 🙈

[ekron]

Thanks @philipp-spiess - the missing semi-colons were indeed the problem! You're a champ.

@froggy1014 - thanks for your reply, appreciate it. But using @tailwind/cli/forms etc did not work for me when running the standalone CLI to process a css file.