Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial

How do we handle fonts using this build chain?
For example Inter | Fontsource - how do we add and use?

In your app.css you just import and use normally.

@import url("../vendor/fonts/Inter Web/inter.css");

html {
  font-family: "Inter var";
}

And then in your endpoint watcher config for esbuild in dev.exs you have to pass the loaders to the command.

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.woff=file --loader:.woff2=file)]}
  ]

You could also use dataurl instead of file and esbuild will embed the fonts encoded as base64 (not recommended, my css file went to more than 6MB with dataurls).

Edit: Sorry, didn’t read the entire post, they remove the css processing from esbuild and handle it with postcss, in this case what I would do is ignore the esbuild base config of phoenix, install it manually and use the api to load the esbuild postcss plugin (esbuild plugins aren’t available through the cli), but in this case you will have to make a tradeoff between simplicity (no need for node, npm or anything else in phoenix 1.6) and power.

not quite as easy as @thomas.fortes suggests..

but close if you are OK with a seperate css file for the font (face) and thus using esbuild for it..

• download the font Inter font family
• copy the Inter Web folder into say /assets/vendor/fonts and rename the folder to InterWeb (need to avoid spaces!)
• change the esbuild args in config.exs to:
  ~w(js/app.js vendor/fonts/InterWeb/inter.css --bundle --loader:.woff2=file --loader:.woff=file --target=es2016 --outdir=../priv/static/assets),
• notice that the app.js is now outputted inside a js folder
  go to your layout and change the js script src to Routes.static_path(@conn, "/assets/js/app.js")
• above your app.css stylesheet do a:
  <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/vendor/fonts/InterWeb/inter.css") %>"/>

for bonus points:
add GitHub - semencov/tailwindcss-font-inter: TailwindCSS Plugin to integrate with Inter Typeface · GitHub by doing:
npm install --save-dev tailwindcss-font-inter (in the assets folder)
and then add the plugin in the tailwind config:

  plugins: [require('tailwindcss-font-inter')({ 
    importFontFace: false,
  })]

now you can use the css class font-inter wherever you want..

will Tailwind be also default for Phoenix 1.6?

No, in this article you can see he is installing it from NPM:

npm install autoprefixer postcss postcss-import postcss-cli tailwindcss --save-dev

woo nice! Quick question - how would I enable scss ?

Going with dart-sass npm package is one alternative. But, if you only need sass - GitHub - CargoSense/dart_sass: Install and run Dart Sass using Elixir. · GitHub is a very good alternative to consider.

Great job @sergio!

Now that Phoenix 1.6.0-rc.0 is out, I tried to migrate my app and this other post also provided me some insights: How I Handle Static Assets in my Phoenix apps | Mitchell Hanberg.

I ended up with something like this:

package.json

"scripts": {
    "deploy": "npm-run-all --parallel deploy-styles deploy-files",
    "deploy-styles": "NODE_ENV=production tailwindcss -i css/app.css -o ../priv/static/assets/app.css --minify",
    "deploy-files": "cpx 'static/**/*' ../priv/static",
    "watch": "npm-run-all watch-styles watch-files",
    "watch-styles": "tailwindcss --input=css/app.css --output=../priv/static/assets/app.css --postcss --watch",
    "watch-files": "cpx 'static/**/*' ../priv/static --watch"
  }
[...]
"devDependencies": {
    "autoprefixer": "^10.2.6",
    "npm-run-all": "^4.1.5",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^2.2.4"
  }

dev.exs

watchers: [
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
  ]

PS.: Even though there’s too much configuration for my taste still, the recompilations are fast, really really fast now with esbuild.

Update: BTW: It seems you don’t need to have postcss installed at all if you are using just Tailwind for your styles. You can replace the deploy script with: NODE_ENV=production tailwindcss -i css/app.css -o ../priv/static/assets/app.css --minify

This guide was super helpful; thank you! I noticed that it doesn’t minify CSS. If you want that, it’s very easy to add if you’re already using PostCSS:

1. Install CSSNano: npm --prefix assets install --save-dev cssnano
2. Add it to your postcss.config.js:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: "default",
    },
  },
}

esbuild also supports Typescript out of the box; just make sure to read the caveats if you’re going to use it.