Tailwind, Next.js and Monorepos with Multiple Frontends

I encountered a frustrating issue recently that caused me to go around in circles and twist my hair in how my latest repository code wasn’t picking up Tailwind CSS class changes in a shared directory. The answer was actually quite simple but it took some digging to get to the bottom of this issue.

So my current project is setup in a monorepo scenario where the structure looks like:

* project root

– backend

– frontend

– apps

– admin

– web

– shared

The idea here is that the shared directory will contain common components to both projects (or more if I create other sites). I have an older project that I intend to import some components and will move them into the shared directory as needed (or refactoring/updating them based on my lessons with Tailwind/Next etc.). However, as I was developing a component that handled the top bar navigation, I noticed that none of the utility classes were being picked up. When I investigated the compiled global css that the browser received and compared it to an older project, I noticed that the size was much smaller, not realizing that the difference was the result of dynamically imported css utilities, etc. At first, I thought that was due to the version difference so I downgraded the tailwind to match my older project. But that required a lengthy bought of pnpm wrestling/resets.

Instead, Gemini suggested I use the @source rule. When I added it, the relative directory was improperly setup so the files weren’t being picked up nor were there any overt errors showing up that the directory wasn’t being found (not that I know of anyway). So that caused me to scramble more thinking that the issue was elsewhere. I did make adjustments to files in the admin directory, which would pick up the changes and cause them to trickle down into the shared components (or rather adding to the global css).

So I asked Claude for a second opinion just as one might ask another doctor what’s wrong. Once again, the @source rule was mentioned. But it did say that I needed the actual relative directory, which I had incorrectly setup. After I corrected the directory, the changes were picked up. With that fix, I probably can adjust some changes like the redundant tailwind config and downgrade to tailwind. Yet I think that rule is a little buried in the documentation so it wasn’t exactly an easy fix without knowing how one can set this thing up properly.

Comments

comments