Boilerplate needed for Phoenix 1.6 + esbuild + Tailwind + SCSS + Alpine

Upgrade using PhoenixDiff. Then add Tailwind and Alpine.

Here you go: Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial.

Oh lordy this is a godsend, yesterday I went through the chore of upgrading from 1.6 alpha to 1.6 and it was painful. I had already used Bamboo and moving to runtime.exs was complex as a newbie

For reference, this is my full commit, if it helps anyone! Upgrade to Phoenix 1.6 · matteing/stack@f8a54bf · GitHub

Thanks for this guide. Are you able to use SCSS in a 1.6 project alongside tailwindcss? I’ve tried incorporating dart sass but it seems to interfere with tailwindcss.

Also check out the s3-upload branch here:

Yeah, I’m having this exact issue. I downgraded my scss to css to fix this, but it’s a less than optimal solution.

For anyone who needs a Fly.io Dockerfile for this:

Note: Change the XXXX’s below to your app name

ARG MIX_ENV="prod"

FROM hexpm/elixir:1.12.1-erlang-24.0.1-alpine-3.13.3 AS build

# install build dependencies
RUN apk add --no-cache build-base git python3 curl npm
# If you prefer yarn instead, swap out the runs here and at the NPM install section below, 
# and be sure to update your mix.exs to run yarn instead of npm
# RUN apk add --no-cache build-base git python3 curl yarn

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
  mix local.rebar --force

# set build ENV
ARG MIX_ENV
ENV MIX_ENV="${MIX_ENV}"

# 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

# note: if your project uses a tool like https://purgecss.com/,
# which customizes asset compilation based on what it finds in
# your Elixir templates, you will need to move the asset compilation
# step down so that `lib` is available.

COPY assets assets
#If you prefer yarn instead
# RUN yarn install --cwd ./assets 
RUN npm install --prefix ./assets
RUN mix assets.deploy

# compile and build the release
COPY lib lib
RUN mix compile
# changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/
# uncomment COPY if rel/ exists
# COPY rel rel
RUN mix release

# start a new build stage so that the final image will only contain
# the compiled release and other runtime necessities
FROM alpine:3.12.1 AS app
RUN apk add --no-cache libstdc++ openssl ncurses-libs

ARG MIX_ENV
ENV USER="elixir"

WORKDIR "/home/${USER}/app"
# Creates an unprivileged user to be used exclusively to run the Phoenix app
RUN \
  addgroup \
  -g 1000 \
  -S "${USER}" \
  && adduser \
  -s /bin/sh \
  -u 1000 \
  -G "${USER}" \
  -h "/home/${USER}" \
  -D "${USER}" \
  && su "${USER}"

# Everything from this line onwards will run in the context of the unprivileged user.
USER "${USER}"

COPY --from=build --chown="${USER}":"${USER}" /app/_build/"${MIX_ENV}"/rel/XXXX ./

ENTRYPOINT ["bin/XXXX"]

# Usage:
#  * build: sudo docker image build -t elixir/XXXX .
#  * shell: sudo docker container run --rm -it --entrypoint "" -p 127.0.0.1:4000:4000 elixir/XXXX sh
#  * run:   sudo docker container run --rm -it -p 127.0.0.1:4000:4000 --name XXXX elixir/XXXX
#  * exec:  sudo docker container exec -it XXXX sh
#  * logs:  sudo docker container logs --follow --tail 100 XXXX
CMD ["start"]

This is exactly what I need, thank you so much

Have you searched the forums beforehand? I’ve seen at least a couple of posts about it in the past week alone. If you have the time to combine the pieces of information here and there I’m certain you’ll be successful.

Also, I’ll link my answer from another post here because I think using ViteJs today is the pit of success for Phoenix 1.6 (coming from Webpack), see if that helps: Bootstrap 5 and scss usage in Phoenix 1.6 - #4 by thiagomajesk.

Yes I did. The problem I have is with using tailwind & SCSS.