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
- 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
- nested rules
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.