Share an alternative `assets` dir for Phoenix

Recently, I found someone is in trouble when integrating TailwindCSS with Phoenix.

Because of that, I wanna share my example project in order to help you reducing time wasted on configuring Webpack.

The project is phx-webpack-example. It includes following features:

  • TailwindCSS with JIT mode and useful plugins
    • @tailwindcss/forms
    • @tailwindcss/typography
    • @tailwindcss/aspect-ratio
  • Alpine.js with necessary patch
  • Compatible with Phoenix LiveView
  • set Inter var as default font
  • theme-sensitive nprogress
  • Webpack 5 + modular configuration, it supports:
    • all the good things provided by Webpack 5
    • JS:
      • sourcemap
      • uglify
    • CSS:
      • sourcemap
      • minify
      • autoprefixer
      • nested rules
    • fonts: eot / woff / woff2 / ttf
    • images: png / jpe?g / gif / svg

And you can inject it with just two commands. For new project:

$ rm -rf assets
$ svn export \
  https://github.com/c4710n/phx-webpack-example/trunk/apps/hello_web/assets \
  assets
# SVN provides export function which is useful for copying a sub-directory from a repo.
# But, Git doesn't.

Hope you guys like it.

3 Likes