tailwindcss
tailwindcss copied to clipboard
tailwindcss CLI no longer works with Docker bind mounts
What version of Tailwind CSS are you using?
4.1.11
What build tool (or framework if it abstracts the build tool) are you using?
@tailwindcss/cli
What version of Node.js are you using?
node:22-slim
What browser are you using?
Chrome
What operating system are you using?
macOS (w/docker)
Reproduction URL
Create a Dockerfile similar to the following:
FROM node:22-slim
WORKDIR /opt/app/
COPY package.json package-lock.json tailwind.css ./
RUN npm install
CMD ["npm", "run", "build-css:dev"]
Create a package.json similar to the following:
{
"scripts": {
"build-css": "tailwindcss -i ./tailwind.css -o ./static/tailwind.css",
"build-css:dev": "tailwindcss -i ./tailwind.css -o ./static/tailwind.css --watch --poll"
},
"devDependencies": {
"@tailwindcss/cli": "^4.1.11",
"@tailwindcss/typography": "^0.5.16",
"tailwind-scrollbar": "^4.0.2",
"tailwindcss": "^4.1.11"
}
}
Create a tailwind.css similar to the following:
@import "tailwindcss" source(none);
@source "templates";
Build and launch the docker image with templates bind mounted into the container.
Modify a file in the templates directory.
Note tailwindcss CLI does not detect the change.
Describe your issue
The --poll option was removed from the tailwindcss CLI and as a result, the --watch option no longer works with docker bind mounts.
The advantage of a bind mount is that we can run the tailwindcss CLI inside a docker container as part of our docker compose file, and the output from the CLI is then available to our app running in a separate container (during development).
However, a bind mount on macOS docker doesn't forward filesystem events, so it's necessary to poll.
The new watcher library being used offers a "brute-force" backend which might help(?), but I don't see a way to select that backend in tailwindcss. https://www.npmjs.com/package/@parcel/watcher
(see also #7725)