Thanks Sergio, this helped me a lot. I created a script to do all the above steps automatically.

script at gitlab

I've got tailwindcss ^2.2.19 when I setup my project. I notice that jit didn't work. The output app.css size is 4 MB. I had to add --jit to my watch command:

    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      "--jit",
      cd: Path.expand("../assets", __DIR__)
    ],

This section:

    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]

causes Google Chrome to crash with an Aw Snap message. I'm using WSL 2 with Windows 10 and I can see Live reload reloading the app.css many, many times.

For anyone coming here and using Alpine 3.5 or later, you also need to modify your config.exs to change the config :esbuild section from --target=es2016 to --target=es2017 as Alpine no longer supports transpiring to es2016.

Thanks for putting this together. I'm stumped on the alpine stuff. I've npm installed it and added the setup code to "assets/js/japp.js" (via a statement like import "alpinejs" and the rest of the config snipped from the article), but the only way I can get Alpine to work is if I also load it directly into the layout html via

 <script defer src="unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

then it works. If I comment that script tag out, then no go. Any tips for what I might be missing? Thanks!

Excellent and straight to the point - thanks.

Im having issues with app.js - the part where its assigning

hooks: hooks,

Is throwing a js error "hooks is not defined"

just trying to debug that today.

Just to confirm, your project works on OSX (BigSur) on an M1 chip, and having the following:

• asdf: v0.8.1-a1ef92a
• elixir 1.12.2
• erlang 24.0.2
• nodejs 16.6.2

So glad there is hope to never needing again to deal with node-sass, webpack and other similar ... "life improving" tools.

thank you for the writeup. Can you please add a few more details about how you generated the phx project (did you use phx 1.6 or was it created by hand and 1.6 was added after?!) and also what nodejs version is used, if you don't mind? Thank you!

(will try your project on osx m1, with asdf and report back)