turbo with tailwind CLI

[0xsven]

What version of Turborepo are you using?

1.1.10

What package manager are you using / does the bug impact?

npm

What operating system are you using?

Mac

Describe the Bug

I am trying to get tailwind CLI working within a package.

This command doesnt work

npm run dev

Result: packages/ui/styles/output.css remains empty

This command does work

npm run dev -w packages/ui

Result: packages/ui/styles/output.css is filled with tailwind CSS

---

Turborepo's pipeline seems to somehow break tailwind-cli

Expected Behavior

Both commands from above should do the same thing: Fill the output.css file with css.

To Reproduce

https://github.com/0xsven/turbo-tailwind-cli

[tpdewolf]

I can confirm. It works on the initial call but not on change.
It also doens't work with postcss cli + tailwind

[brattonross]

I have done a little debugging of the Tailwind CLI code to try and figure out at what point the issue occurs, and have found that it is not consistent. The only consistency I can see is that it always hangs on a promise.

In my case I am using a custom PostCSS config file, which makes Tailwind load the file asynchronously. The vast majority of the time I am seeing that the CLI hangs on this line. However, sometimes loading the config will succeed, and it will instead hang when trying to write the output file.

[Lucanis]

I've encountered a similar problem. After looking into it, the origin seems to be this listener

[gbkwiatt]

I am just setting up new turborepo and almost everything works except that. Before I bundled projects to turborepo I was using postcss in watchmode alongside dev server, for live reloading development. But now when executing thise commands with turbo, postcss watch exist immediately. I've looked into tailwind issue that was fixed but nitnsure if that's related, but it seems to be issue still

[patlux]

Same issue here.

It only works without turbo. If I execute the command directly it creates the file, but not with turbo.

# package.json

"scripts": {
    "dev": "npx turbo dev:remix dev:tailwind --parallel --no-cache",
    "dev:remix": "remix dev",
    "dev:tailwind": "tailwindcss -w -i ./styles/app.css -o ./app/styles/app.css"
}

pnpm dev                                                                                                                       main ✱ ◼

> ...@ dev /Users/...
> npx turbo dev:remix dev:tailwind --no-cache

• Running dev:remix, dev:tailwind
• Remote caching disabled
dev:tailwind: cache bypass, force executing 8ac3b6a676e43113
dev:remix: cache bypass, force executing 288362196a4beacd
dev:remix: 
dev:remix: > ...@ dev:remix /...
dev:remix: > remix watch
dev:remix: 
dev:tailwind: 
dev:tailwind: > ...@ dev:tailwind /...
dev:tailwind: > tailwindcss -w -i ./styles/app.css -o ./app/styles/app.css
dev:tailwind: 
dev:remix: Watching Remix app in development mode...
dev:remix: 💿 Built in 411ms

No logs like dev:tailwind: Rebuilding... at the end which indicates the build

[patlux]

Got it. It works with [email protected] and below but it stops working with [email protected]

[gbkwiatt]

I've used concurrently package after all

[tknickman]

This should now be resolved in the latest with-tailwind example:

npx create-turbo@latest -e with-tailwind

[CodyAdam]

I've tried to see if this was really fixed, but it isn't. The new with-tailwind use tsup to bundle the build and dev jobs. But if you use Tailwind CLI, it still doesn't work.

[CodyAdam]

This workaround worked well :
tailwindlabs/tailwindcss#8517 (comment)

  "scripts": {
    "watch": "concurrently \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\""
  }

using concurrently

[GiancarlosIO]

This should now be resolved in the latest with-tailwind example:

npx create-turbo@latest -e with-tailwind

That example is using postcss not the tailwindcss cli 😢

[tadeumaia]

Yes, having the same problem.

IMHO, Turborepo should not break a CLI function that works without it.

@tknickman Also, this commit reverted to using tailwind instead os TSUP
6011103#diff-ac7701aa9c03522b1fe7f9fecb9d04c135ec1efd60f014a49fb66f072546ab9d