Phoenix is an amazing framework that we use and love at Batteries Included. We also really love tailwind CSS. So using both with the latest up to date

Phoenix with latest tailwind and webpack

submited by

Style Pass

2021-06-25 23:00:07

Phoenix is an amazing 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 important 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 new updated versions, while others won't be compatible with newer webpack, and still others won't be useful with Tailwind.

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 ensure that I don't break things. Lets first remove the things that we're not going to use any more.

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 latest versions. You can upgrade however you want.