eclark
Tailwind CSS and Webpack 5 HOWTO
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
First Post!
Kry
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?
Last Post!
eclark
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.
Popular in Guides/Tuts
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"