Phoenix is a fantastic framework that we use and love at Batteries Included. We also really love tailwind CSS. So using both with the latest up-to-date software is essential to us. Below is a quick write-up on how we’ve modified the default phoenix install to use Webpack 5 and TailwindCSS.
Next, we need to get the js dependencies to be compatible with webpack5 and TailwindCSS. Some software will need updated versions, while others won’t be compatible with newer Webpack, and others won’t be useful with Tailwind.
Let’s first remove the things that we’re not going to use anymore. We’re going to use Tailwind, which uses CSS and PostCSS for styling. Since sass has gone through several version upgrades and we’re not going to rely on it actively, I’m going to remove it rather than ensuring that I don’t break things.
Next, I want to upgrade all the Webpack things. Webpack 5 was a breaking change that will require some elixir code changes. First, let’s upgrade. Here I’m going to use a utility and upgrade all the dependencies to know the latest versions. You can upgrade however you want.
Add on Tailwind and PostCSS
Before making changes to
webpack.config.js, let’s install the tailwind
dependencies and build tools. These are all generating code in the final CSS so
that they can be dev dependencies.
Change Webpack Config
webpack.config.js needs to be changed since we’re drastically changing build
versions and tools. First, terser became part of the build, and other CSS/js
optimization plugins haven’t been needed or updated for this version, so let’s
make the necessary changes.
For example, the setting
devtool needs an updated in Webpack 5. That line
Terser became part of the main Webpack build. Since there’s no longer a need to configure that and sourcemaps, we can significantly simplify the optimization setting.
We want to use post CSS and Tailwind; we’ll need to change the module settings to include PostCSS and the file types we expect.
For me, the CSS loader was configured like this previously:
We’re not going to use sass, and we do want SVG and post sass. The end result for me is that the module rules become:
The key changes were:
- Change to CSS file type
- Remove sass loader
- Add PostCSS loader
- Add on image and font file types
The plugins section and mode section need small tweaks becoming:
app.scss needs to be
app.css and we need to include Tailwind. We’ll also
need to clean up sass leftovers and renames.
Also, add the
NODE_ENV environment variable when building the production
field in the
package.json file to do all of this. That will end up looking
PostCSS and Tailwind
Tailwind and PostCSS both need some configs. Let us create those. For PostCSS I
am going to add
assets/postcss.config.js that looks like this:
Then for Tailwind, I’m going to add a file
should look like:
The above code sets the defaults; You can add your colors or add other tailwind plugins as you see fit. This config does use the tailwind jit, which we’ve found to be faster but a little prone to missing a new class being added.
That should be good enough to get everything builds. Check that by running the production build.
If that works then we’re all good to go for the next steps.
Dev Server STDIN
Webpack changed the command line arguments for its watch and compile mode. That feature is used during development, and we’re going to need to make changes to the Phoenix endpoint in dev.
Currently, there should be a config in
config/dev.exs inside there is a key
for configuring the static watchers.
mode is now equal to development, and we’re watching and watching
options-stdin the changes are subtle but essential.
With everything all done, you should be good to go. Webpack 5 should be running and integrated with phoenix. TailwindCSS should be usable and purged if unused. We’ve put the result of the upgrade up in a repository here: example_phoenix. Each commit should be one step in the process above.