Working with Phoenix on OpenBSD (tailwind, esbuild)

Note: This is a HOWTO, not a question. I hope this is an appropriate place to share this, so it can be found by others who might run into problems getting Phoenix to work fully on OpenBSD.

Recent versions of Phoenix are tightly integrated with both TailwindCSS and esbuild, and mix phx.new installs binary distributions of both.
Unfortunately that doesn’t work out of the box on OpenBSD, and needs a few extra steps to be carried out right after initializing a project.

Tailwind

The automatically installed Linux binary obviously will never work on OpenBSD. Therefore we will need to manually install tailwind:

First install NodeJS:

$ doas pkg_add node

then Tailwind and the Forms plugin:

$ npm install -D tailwindcss
$ npm install -D @tailwindcss/forms

It’s possible that this creates a version mismatch between the version of tailwind installed by npm and the version from the default configuration. If that’s the case, just adjust the version in config/config.exs:

...
# Configure tailwind (the version is required)
config :tailwind,
  version: "<your version here>",
...

now all that’s left is to replace the binary _build/tailwind_linux_x64:

$ > _build/tailwind_linux_x64

with a small shell script

#!/bin/sh

npx tailwindcss "$@"

At this point we’re done. All the Tailwind integrations will now work on OpenBSD in the same way as on Linux.

esbuild

Those working with 11th gen or later Intel CPUs will notice that the esbuild binaries released by the esbuild team will crash on OpenBSD.
(see Install fails on OpenBSD · Issue #3523 · evanw/esbuild · GitHub for details)

Fortunately that’s also easy to fix by building esbuild with OpenBSDs patched go compiler and copying the resulting binary over _build/esbuild_openbsd_x64.