esbuild not re-building css

[carlkoblavie]

Hi Nick,
Really great setup you have here. I've followed through your readme. In fact, I simply cloned and set up a sample project using your starter kit.
All the services are up and running as expected. The only issue is 'css' esbuild doesn't re-build when I make an update in the views folder or appplication.css file, as expected.

The 'js' watcher works as expected.
I'm sure it might be an issue with my setup.

I'm using a Mac Book Pro M1, with docker; Docker version 20.10.17, build 100c701

This may have nothing to do with your starter kit, and may be an issue with my setup, so I will appreciate any pointers on what to look at.
I did a fresh install using rails new myapp -j esbuild -c tailwind and run it without docker, and both watchers worked as expected, so I'm thinking this could be something related to Docker.

Anyway, thanks and hope you have some ideas

[nickjj]

Hi,

When I do the same thing and run it, both js and css do update on changes. Modifying the application.css as well as adding new tailwind classes into any erb template results in a new css file being generated.

Do you have both NODE_ENV and RAILS_ENV set to development and you've built your images with them set?

I don't have a mac to test this on but I would start by running ./run shell to connect to the container after you've upped the project and see if the app/assets/builds/ directory has the new file. You can cat it out or open it up in vi to check if the new class exists. If it's not there then I'd check the app/assets/stylesheets/application.tailwind.css file within the container to make sure the changes are making their way into the container.

[nickjj]

By the way, a temporary (and not ideal) solution would be to run docker compose restart css from in a second terminal to manually generate a new css file. This should finish in about 2 seconds and doesn't involve downing and upping the whole app. At the very least you'll be able to see the changes then until we find the root cause here.

[carlkoblavie]

Hi,
sorry for the radio silence.

Yes, I have both NODE_ENV and RAILS_ENV set to development.

[nickjj]

Did you try the debugging steps from my previous comment?

[carlkoblavie]

Yes I did.

changes I make to app/assets/stylesheets/application.tailwind.css or new tailwind css classes added in a views file are indeed making their way into the container, but are not re-built into app/assets/builds/application.css.

[nickjj]

Hmm, I wonder what's up with that. I can't reproduce that in this example project, although I haven't build it in a while with --no-cache, maybe something in the base Ruby image changed.

What if inside of the Dockerfile you add inotify-tools to the list of apt packages that get installed in the assets build stage?

[nickjj]

I'm going to close this one out, I think this was a bug with TailwindCSS and I was able to reproduce it.

This project is using TailwindCSS 3.2.4 where file watch changes are working without having to do anything extra.

It it possible that you're using an earlier version of TailwindCSS 3.2.X? I did notice in a project using TailwindCSS 3.2.1 CSS changes weren't being picked up. I see this also referenced in tailwindlabs/tailwindcss#7759 and 3.2.4 has that fix applied.