Watch issues on Docker on Windows

[Sieabah]

What version of Tailwind CSS are you using?

3.0.0

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

ng build (Angular)

What version of Node.js are you using?

Docker node:v14

What browser are you using?

Chrome

What operating system are you using?

Windows, but app is built within Docker

Describe your issue

JIT is a great concept until the expected watch API doesn't work. When working within a docker container on windows file events are not correctly propagated. This creates issues for build systems that do not support polling.

I got around this in v2.2 by disabling purge in development mode and enabling it for builds. Now with JIT the styles are not properly recreated when I change a component template.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you create a minimal reproduction repo with docker that showcases this issue?

[Sieabah]

Hey! Thank you for your bug report! Much appreciated! 🙏

Can you create a minimal reproduction repo with docker that showcases this issue?

Literally any configuration of tailwind inside of a docker container from windows will not work in any capacity if the JIT is required. So I could create a repo but it might end up working if you're using it from mac or linux since they share similar enough file events.

[zackdotcomputer]

I was running into this issue with RedwoodJS and couldn't figure out why it was happening there but not in NextJS. I'll take that issue up with their team.

For the purposes of helping folks who wind up in this thread, though, I found this troubleshooting tip from the V2 Tailwind site fixed my issue. TLDR; I needed to set the env variable TAILWIND_MODE=watch when developing to kick the JIT compiler into rebuilding the css files every time my sources changed. It might be worth promoting that tip to the v3 getting started guide now that JIT is the default?

[Sieabah]

@aizaiz That's a huge component of my workflow is playing around with classes before changing it in the source. It's a shame there doesn't seem to be a way to disable purge or even allowing polling. Postcss seems to support it but I'm not sure if it will work with Angular or with HMR.

@zackdotcomputer I have that in my environment and it doesn't help when the file events aren't properly handled like with Docker on windows. There simply is no file events that ever get emitted when a file changes.

@RobinMalfait If you require a min repo for this to be considered a bug all I'm going to do is the following.

npm i -g @angular/cli
ng new sample
cd sample
npm i --save-dev tailwindcss

#tailwind config with content = './src/**/*.{html,ts}'
ng serve --poll 2500

That's all I'm willing to do because this should occur on any configuration within containers on windows due to how the file system is mounted.

Regardless I've had to downgrade to v2 until there is some fix that allows me to disable purging in development or allows polling so the JIT can work with containers consistently.

[reinink]

@Sieabah Hey thanks for sharing this and for the reproduction steps. We're going to look into this after the Christmas break when we have easier access to a Windows machine.

For everyone else commenting on this issue who miss having all the classes being generated ahead of time (how Tailwind worked prior to the new JIT mode), that is a separate issue from file system events not working on Docker on Windows. In the interest of keeping this issue focused, I have renamed it to "Watch issues on Docker on Windows". Please keep any further discussion related to that problem specifically.

---

That said, for the benefit of everyone who is new to the JIT mode, here is a quick history lesson on how we ended up here. One of the biggest challenges we faced in Tailwind prior to JIT mode was performance issues. Because all the classes were generated ahead of time, you ended up with a massive CSS file. Of course you could then purge any unused styles when going to production, but in development the problem still existed.

Working with a CSS file this large caused memory issues in webpack builds, it caused both production and development builds to be slow, and even once you were able to generate the large CSS file, the browser would then have a hard time parsing it at runtime — devtools would literally lock up.

The workaround to these issues was to limit the number of utilities available in Tailwind. Great CSS features had to be left out. Many variants were also disabled by default, and you were definitely not able to stack variants. And we had to limit the number of colors enabled, as they especially contributed to the overall file size.

All of these problems go away with the new JIT mode. In JIT mode, Tailwind only generates the styles that are actually needed for your project, and nothing else. This has huge performance benefits, and allows us to now enable a much wider range of utilities, variants and colors. Development builds are lightning fast, as are production builds. No more memory issues. No more issues with browser devtools crashing. It does mean, however, that you no longer have that massive CSS file generated ahead of time, as, of course, generating it in advance would be throwing away all these benefits.

We do understand that this has implications for autocompletion. This is the reason we've invested a lot into our IntelliSense plugin. We've worked with the folks at JetBrains to help them with their Tailwind CSS plugin. We have opened sourced the Tailwind CSS Language Server to make it possible for others to create similar plugins. Someone has already figured out how to use this to add autocompletion to Neovim. We really see this as the path forward to autocompletions.

That all said, if having this pre-generated CSS file was crucial to your workflow, and using the above mentioned autocompletion tools don't work for you, your best bet is to stick with Tailwind v2.

[thecrypticace]

Hi! Thanks for reporting this issue! We've looked into it and verified the problem with angular apps, tailwind, and docker on Windows.

The core of the problem is that Angular is setting the TAILWIND_MODE=watch env. This flag only exists as a workaround shouldn't be necessary as long as postcss-loader is up to date. I've gone through and checked and it is as well as verified that it works when manually running anglar using the default setting TAILWIND_MODE=build.

The relevant code is here:
https://github.com/angular/angular-cli/blob/2c9a33dddb38694b6940ec6981c49904de1ab636/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts#L152-L154

[Sieabah]

@thecrypticace Manually running angular outside of the docker container would defeat the purpose of my issue?

Looking over the code snippet, in my case would I just have to set TAILWIND_MODE in the container environment to build and not watch and I should see it fixed?

[thecrypticace]

Yeah I completely understand. I don't mean to run angular outside of docker. I mean you'll need to set the env of the server that's running in the container.

Alternatively, you can update to the latest version of Tailwind as we have outright removed support for TAILWIND_MODE=watch because it is no longer needed. As such I'm going to close this issue because it should be "fixed" at this point. If you do run into further problems please re-open it and I'll take another look.