Page not rendering the same as local

Phoenix
1

Hello!
I recently deployed an application, but I’m encountering an unusual rendering issue in deployment: a pink box unexpectedly appears on the page. I’ve attached screenshots to show the difference between the local and deployed versions.

this is how it look deployed

Screenshot 2024-11-12 at 3.33.01 PM
Screenshot 2024-11-12 at 3.33.01 PM1384×1352 59.5 KB

this is how it looks locally (I used env MIX_ENV=prod locally)

Screenshot 2024-11-12 at 3.33.41 PM
Screenshot 2024-11-12 at 3.33.41 PM1384×1352 50.6 KB

Here’s what I’ve done to investigate:

  1. Checked Logs: Both server and browser logs show no errors or warnings that would explain the pink box.
  2. HTML and CSS Verification: The rendered HTML looks correct, the elements are there but no idea what Is causing that pink box to block all.
  3. Cross-Browser Testing: The issue appears consistently in Chrome and other browsers.

Given this information, does anyone have insights on what could be causing this issue? Are there known deployment-related factors that might result in unexpected styling changes?

2

It looks that it is a css issues, the css landing on fly Is not the same that lands in local.

3

I solve the issue. I was using css nesting rules, example:

#project {
  @apply max-w-4xl mx-auto;

  form {
    @apply bg-white px-10 py-8 mb-6 shadow rounded-lg mx-auto w-full max-w-xl;

    input[type="text"] {
      @apply mb-4 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md transition duration-150 ease-in-out;
    }

    input[type="text"]:focus {
      @apply outline-none ring ring-indigo-300 border-indigo-300;
    }

    input[type="file"] {
    }

 }
}

and apparently the default tailwind process does not support this when building.
I resorted using dart_sass, but another solution could be just simply flatten out those css rules and it should work, that is why it was different from dev to production enviroments:
resources:

1 Like