Koszal

Browsers tricked to use an outdated app.css

I encountered a weird bug(?) with Plug.Static(?) where browsers sometimes are tricked to use an outdated app.css file. I first noticed this a couple of months ago while experimenting with Phoenix and Tailwind CSS for a CSS animation effect. I’m not really a web guy, it was my first encounter with Tailwind and I found this extremely confusing. The animation worked inconsistently, and I eventually realized it depended on specific CSS classes I used. Some classes were missing from the app.css file loaded by the browser, if I happened to use one, the animation would not work.

To debug, I used a JavaScript function to scan the DOM and identify undefined CSS classes. After much trial and error, I resolved the issue (mix digest.clean (?)) and eventually forgot about it until it resurfaced yesterday. I was tweaking styles with an AI agent. It fixed most things but some elements still displayed incorrectly. The problem was - again - missing classes. The agent tried whitelisting Tailwind classes, modifying App.Endpoint, etc.—the problem persisted.

Here is what I found:

Tailwind correctly generates app.css.
Fetching the file via curl or wget returns the fresh, correct version.
In the browser, requests contain etag headers, the response from the server is 304 - not modified.

Hard reloads, recompiling, restarting the app, switching browsers does not solve the issue.

This happened on 1.7 but on that day I tried upgrading to 1.8 (in a separate branch) - not sure if that is related. I would appreciate some guidance on how to troubleshoot it and/or confirm the problem.

5 comments

/phoenix #digest #static-assets #plugstatic

0 314 5

2025-08-14 04:34:49 UTC

First Post!

pupdogg

I’ve used this trick with Ruby on Rails assets in the past, but I’m not sure if it will work in your situation. Could you try appending an epoch timestamp to your stylesheet tag in root.html.heex so that it looks like this:

<link phx-track-static rel="stylesheet" href={"#{~p"/assets/css/app.css"}?v=#{System.system_time(:second)}"} />

Post #2

Last Post!

arcanemachine

For Tailwind v3, you would add a safelist to ensure such classes were generated:

assets/tailwind.config.js

module.exports = {
  content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
  // ...
  safelist: [
    {
      pattern:
        /(alert|bg|btn)-(primary|secondary|info|success|warning|error)/,
    },
    {
      pattern:
        /text-(primary|secondary|info|success|warning|error)-content/,
    },
  ],
  // ...
}

Source: Content Configuration - Tailwind CSS

For Tailwind v4, it looks like this:

assets/css/app.css

@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/your_project_web/";

/* Other stuff skipped... /*

/* Safelist - Ensure that these Tailwind classes are always generated */
@source inline('{alert,bg,btn}-{primary,secondary,info,success,warning,error}');
@source inline('text-{primary,secondary,info,success,warning,error}-content');

Source: Detecting classes in source files - Core concepts - Tailwind CSS

Post #6