This is my first post here and we are going to look at getting TailwindCSS with the awesome JIT (just in time) compilation setup in Rails 6.1 app v...
For further actions, you may consider blocking this person and/or reporting abuse
Hi David! Thanks a bunch for your walkthrough. Very helpful!
That being said, when running bin/webpack-dev-server it keeps re-compiling every second. As a result the page keeps refreshing. Any thoughts on how to fix that?
All the best,
Oliver
Hi Oliver,
I followed above instructions and got the same issue as you did.
I changed the tailwind.config.js a little bit: I did not use
./**/*.html.erbin the purge section but./app/**/*.html.erb. This solved for me the issue of the recompiling.Thanks for that. It was pointed out to me by someone else as well and came here to change it and saw your comment now only. 🤦♂️
Hey Oliver, thanks so much for the feedback.
What version of Ruby are you running?
I'm experiencing the same issue on Ruby 2.7.3.
same issue on Ruby 3.0.1
Edit: I think I was wrong below. Here's what worked: try setting
compile: falseinwebpacker.ymland commentingmode: 'jit',intailwind.config.js. I can runbin/webpack-dev-server,rails s, andguardat the same time now without issue or compile-refresh loops.This started happening to me after I got tailwind working. Are you running some live-reloading tool? (e.g., I was running
bundle exec guard.) If so, try not running that.bin/webpack-dev-serverhandles livereloading when running, it seems.NB: webpack-dev-server would almost always compile things twice for me (now) but stops after that (until I make another change).
I also noticed that commenting
mode: 'jit',intailwind.config.jsseemed to fix it too, before I stopped runningguard.You can also just not run
bin/webpack-dev-server--rails swill still compile stuff for you and then you can havebundle exec guardin the bg if you prefer that.Great tutorial!
I'd like to point 2 improvements tough:
Typo in:
Since I wasn't used to rails with webpack, had to figure out this:
Hi Caio, thanks for that. Fixed now.
One recommendation for an edit:
Following on a fresh Rails app, it looks like webpack-cli needs to be at at least 4.3.0 or it will throw an error. (TypeError: Class constructor ServeCommand cannot be invoked without 'new' etc.)
I had this same issue however upgrading webpack-cli to 4.3.0 didn't work for me. I had to upgrade to 4.7.2 in order for it to run. Not sure why?
Great article, kudos !
I found one typo and since you did such a great job with this article, I would be glad to help by pointing to it: the path to config/webpacker/environment.js should be config/webpack/environment.js (webpack, not webpacker).
I also have a question: in file app/views/layouts/application.html.erb, the line
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
is duplicate at lines 11 and 13. Is this done on purpose ?
Cheers and thanks again.
Thanks for the kudos.
Fixed the typo.
I'm not sure I follow your comment re the duplicate line. The three pack and link tags each have very distinct purposes.
If I'm missing something, please feel free to point it out.
Fixed. Thanks.
Awesome! Works like a charm. Thanks @davidteren
Thank you so much for writing this article. Fantastic!
Awesome guide, very easy to follow. Thank you, David
Hi David, great tutorial, thanks a lot, it's a chance to use this with Alpine.js?
been trying for a while but I can't make it work. thanks a lot.
Hi Fransico, I've previously set that up and written about it here Tailwind UI, Tailwind CSS, AlpineJS & Inter Typeface for Ruby on Rails.
Let me know if that does not work for you and I'll write it up.
Oh, sorry, I didn't see your reply, I'm deeply sorry.
Thanks for your answer. For a long time, I use that tutorial, until Tailwind UI get the 2.0 version update, after that, I can't get AlpineJS working on my curret RoR setup.
Hey, David! Thanks a lot for taking the time to write this, really helpful!