Browsers tricked to use an outdated app.css

Questions & Help Questions
, , ,
6

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