[Bug]: filewatcher creates dead css files with tailwind

[mnlfischer]

What version of Remix are you using?

1.0.6

Steps to Reproduce

1. Create a new project with npx create-remix@latest
2. Follow the steps in styling to integrate Tailwind
3. Start dev server with npm run dev
4. Add some styles in routes/index.tsx e.g. className="py-4" and save
5. Repeat adding different styles.

Not confirmed:
This also happens to js files in public/build/*.

Expected Behavior

I expect Remix creates only one css file for index.tsx in build/_assets/* or cleanup old files.

Actual Behavior

On every change Tailwind is made in tailwind.css when a new class is added, Remix creates a new css file in build/_assets/*. This ends up in a lot of dead css files.

[babycourageous]

UPDATE: Some of this might be intended behavior as a result of the Just In Time compiler
https://v2.tailwindcss.com/docs/just-in-time-mode#styles-aren-t-removed-when-classes-are-deleted

When the JIT engine is running in watch mode, you might notice that when you add a class to your HTML then remove it, that the class is still present in your CSS.

That is from v2 docs, but i assume carries over to v3 now that it's JIT all the time.

---

I too noticed this last week in a remix project.
@kentcdodds - just wanted to let ya know this is the issue i mentioned in office hours today (apologies if the ping is gauche)

I did some troubleshooting and here's what I've noticed.

The "dead" tailwind files only get created for new classNames added. It also appears that each new "dead" file is a merge of the ones before it. I created a repo to demo - https://github.com/babycourageous/remix-tailwind-compiled-styles-bug

1. spin it up (npm run dev) - you'll notice that in the build folder is a tailwind-XXXXX.css file. That is the initial build and should be just the default TW output.
2. add a class somewhere in the app - ie the h2 Welcome text in the index.tsx route. Add a text-5xl to it. You should see a new tailwind-XXXXX.css created in the build folder. If you open your compiled tailwind.css in app/styles you should see the text-5xl declaration at the end.
3. REMOVE the text-5xl from the h2. A "dead" file should not have been created. In addition - the compiled app/styles/tailwind.css still has the text-5xl class.
4. add a new class to the h2 (ie text-6xl) - you should see a new "dead" file in build. It, as well as the compiled app/styles/tailwind.css will have both the text-5xl and text-6xl in it.

This repo uses the most up to date Remix, TW, PostCSS but i did observe it with Tailwind 2.x and PostCSS 9.0.2

npm run build copies over the "dead" files into the public directory - not sure if that is relevant info.

Hope this info helps !

[duranatakann]

https://github.com/remix-run/remix/tree/dev/examples/tailwindcss

There was no edit in this sample repo .
In this way, custom classes do not work .

@babycourageous Have you tried before?

[pcattori]

Fixed by #5223