Tailwind CSS and Webpack 5 HOWTO

Learning Resources Guides/Tuts/Tips/Info
, ,
1

I’ve been working on a phoenix project lately and I wanted to use the latest versions of everything. Webpack 5 had some breaking changes and upgrading it was interesting. That lead me to write up a post on it. https://www.batteriesincl.com/posts/phoenix-modern-tailwind-webpack5

So if you’re looking for how to use Phoenix with Webpack 5 and Tailwind take a look and let me know if you have other questions. Thanks

21 Likes
2

Heya you’ve really done a great job in your blog post so thanks alot for sharing. I have it all set up but for some reason the class don’t have any effect on what’s displayed on the page. I get the intellisense and stuff for tailwind but classes i add don’t change anything. Do you have any idea what i might be missing?

3

I’ve seen some issues with getting previously unused tailwind classes to live refresh. I found that restarting the Webpack process (I restarted the phoenix server) and then hard-refreshing the browser window fixed most issues. After the class was used by at least one template, everything worked.