I recently ran into an issue where a menu dropdown rendered differently in production than it did locally.
The width was collapsed, causing the text for each item to get truncated.
For example, Dashboard showed up as Da....
This ended up being a deployment issue, not a code issue. More specifically, it was the order of our deployment steps.
When deploying, we were running npm run build before composer install.
On the surface, it shouldn't seem like the order of those commands would matter, but this app's CSS used a Tailwind @source directive pointing at a UI package installed via Composer:
/* resources/css/app.css */
@source '../../vendor/robsontenorio/mary/src/View/Components/**/*.php';
Tailwind scans those files to decide which classes it should generate.
But since it was looking in the vendor folder, and we hadn't run composer install yet, obviously that specific subfolder didn't exist yet.
So Tailwind never saw those classes in use, and they were left out of the production CSS.
The fix was simple.
I just reordered the commands so composer install runs before npm run build.
Problem solved!
But I wanted to share this story, because it highlights how subtly devastating the differences can be between local development and production.
Locally, your vendor folder is always sitting there from previous installs, and you're probably running a different less-optimized npm command for local testing.
The bug only exists on a clean deploy, where each step depends on the one before it having done its job.
And even worse in this case, nothing technically failed or errored out. Tailwind doesn't complain when a reference isn't matched. So the deploy succeeded, and the only symptom was a visual bug.
Here to help,
Joel
P.S. Your deployment configuration deserves review just as much as your application code. We look at both. Schedule a code review.
