JIT package.json script example is unclear

[dimfeld]

What version of Tailwind CSS are you using?

2.1

What version of Node.js are you using?

14

What browser are you using?

N/A

What operating system are you using?

Linux

Reproduction repository

N/A

The Tailwind JIT docs suggest setting up package.json scripts that run commands like this:

NODE_ENV=development postcss tailwindcss -o ./dist/tailwind.css -w

But postcss complains:

> NODE_ENV=development $(npm bin)/postcss tailwindcss -o ./dist/tailwind.css -w
Input Error: You must pass a valid list of files to parse

Finally, I realized that "tailwindcss" should be the name of the CSS file, updated the command appropriately, and it all started working.

Analysis

I was initially confused about what this command was trying to do, since it appears to be using the string "tailwindcss" where you would normally put the file, and this is the same as the name of the tailwind postcss plugin.

Until now, I've only ever used postcss and tailwind from within Webpack/Rollup plugins, so my first impression was that the command was using some syntax to tell postcss to invoke the tailwindcss plugin, and I was just missing something in the postcss documentation that did this. It turns out that there was no special mode and "tailwindcss" in the command was just supposed to be the main CSS filename (I think).

Suggested fix

Unless I'm just misunderstanding what's happening here, I think changing "tailwindcss" in the example script commands to something obviously a filename, like "tailwind.css" would make it a lot more clear.

Thanks for putting this together. So far JIT mode is working great!

[jacobdalamb]

Valid issue but wrong repo - https://github.com/tailwindlabs/tailwindcss.com/issues

[dimfeld]

@jacobthesheep Thanks! Didn't realize there was a separate repo for the website. I'll remember that for next time.