I am trying to migrate our app (that uses Tailwindcss, and React on the frontend) from Phoenix v1.5 to v1.6.11
Everything works perfectly on local, but the CSS classes are not being loaded in production deployments.
dockerfile
ARG ELIXIR_VERSION=1.13.4
ARG OTP_VERSION=25.0.3
ARG ALPINE_VERSION=3.14.6
ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-alpine-${ALPINE_VERSION}"
ARG RUNNER_IMAGE="alpine:${ALPINE_VERSION}"
#####################################################
# 1. Build elixir backend and compile assets
#####################################################
FROM ${BUILDER_IMAGE} as builder
# install build dependencies
RUN apk add --update git npm build-base
# prepare build dir
WORKDIR /app
# install hex + rebar
RUN mix local.hex --force && \
mix local.rebar --force
# set build ENV
ENV MIX_ENV="prod"
# install mix dependencies
COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config
# copy compile-time config files before we compile dependencies
# to ensure any relevant config change will trigger the dependencies
# to be re-compiled.
COPY config/config.exs config/${MIX_ENV}.exs config/
RUN mix deps.compile
COPY priv priv
COPY lib lib
COPY assets assets
# compile assets
RUN npm --prefix assets install && mix assets.deploy
# Compile the release
RUN mix compile
# Changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/
COPY rel rel
RUN mix release
#####################################################
# 2. Build release image
#####################################################
FROM ${RUNNER_IMAGE}
RUN apk add --update --no-cache ncurses-libs libssl1.1 openssh
# set runner ENV
ENV MIX_ENV=prod
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
WORKDIR "/app"
RUN chown nobody /app
# Only copy the final release from the build stage
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/diffity ./
USER nobody
EXPOSE 4000
CMD ["/app/bin/server"]
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"../lib/**/*.ex",
"../lib/**/*.leex",
"../lib/**/*.*ex",
"./js/**/*.js",
"./js/**/*.tsx",
"./js/**/**/*.tsx",
],
theme: {
extend: {
fontFamily: {
sans: ["Poppins", ...defaultTheme.fontFamily.sans],
serif: [...defaultTheme.fontFamily.serif],
mono: [...defaultTheme.fontFamily.mono],
},
},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/forms")],
};
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
...
@layer components {
.btn {
@apply py-2 font-medium rounded shadow focus:ring-4 px-4 text-center;
}
.btn-blue {
@apply text-blue-700 bg-blue-200 hover:bg-blue-300 focus:ring-blue-400;
}
}
confix.exs
...
# Configure esbuild (the version is required)
config :esbuild,
version: "0.14.29",
default: [
args: [
"js/app.js",
"--bundle",
"--loader:.js=jsx",
"--target=es2017",
"--outdir=../priv/static/assets",
"--external:/fonts/*",
"--external:/images/*"
],
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
# Tailwind CSS
config :tailwind,
version: "3.1.7",
default: [
args: [
"--config=tailwind.config.js",
"--input=css/app.css",
"--output=../priv/static/assets/app.css"
],
cd: Path.expand("../assets", __DIR__)
]
...
mix deps
{:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.1", runtime: Mix.env() == :dev},
I have made sure these suggestions from Chris are in place even though the phoenix version i use has already taken care of the changes: comment-#2 and comment-#8
When inspecting the network tab, i can confirm that the app.css file is being downloaded by the browser just fine.
Anyone have any debugging suggestions on this? 
