DEV Community

Cover image for Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

David Teren on June 09, 2021

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...
Collapse
 
curting profile image
Oliver Curting

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

Collapse
 
keijsvog profile image
Koen Eijsvogels

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.erb in the purge section but ./app/**/*.html.erb. This solved for me the issue of the recompiling.

Collapse
 
davidteren profile image
David Teren

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. 🤦‍♂️

Collapse
 
davidteren profile image
David Teren

Hey Oliver, thanks so much for the feedback.
What version of Ruby are you running?

Collapse
 
alistairtweed profile image
Alistair Tweed

I'm experiencing the same issue on Ruby 2.7.3.

Thread Thread
 
scotti_jack profile image
Jack Scotti

same issue on Ruby 3.0.1

Thread Thread
 
xertrov profile image
Max Kaye • Edited

Edit: I think I was wrong below. Here's what worked: try setting compile: false in webpacker.yml and commenting mode: 'jit', in tailwind.config.js. I can run bin/webpack-dev-server, rails s, and guard at 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-server handles 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', in tailwind.config.js seemed to fix it too, before I stopped running guard.

You can also just not run bin/webpack-dev-server -- rails s will still compile stuff for you and then you can have bundle exec guard in the bg if you prefer that.

Collapse
 
caioabe profile image
Caio Abe

Great tutorial!

I'd like to point 2 improvements tough:

Typo in:

<!-- missing ">" -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"
Enter fullscreen mode Exit fullscreen mode

Since I wasn't used to rails with webpack, had to figure out this:

# run this after updating the webpack in gemfile
bundle exec rake webpacker:install
Enter fullscreen mode Exit fullscreen mode
Collapse
 
davidteren profile image
David Teren

Hi Caio, thanks for that. Fixed now.

Collapse
 
francescok profile image
Francesco Kirchhoff

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.)

Collapse
 
storrence88 profile image
Steven Torrence

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?

Collapse
 
frogfangio profile image
Albert Anstett

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.

Collapse
 
davidteren profile image
David Teren • Edited

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.

Collapse
 
davidteren profile image
David Teren

Fixed. Thanks.

Collapse
 
msojka profile image
Martin Sojka

Awesome! Works like a charm. Thanks @davidteren

Collapse
 
stephaneliu profile image
Stephane Liu

Thank you so much for writing this article. Fantastic!

Collapse
 
mzrnsh profile image
Giorgi Mez

Awesome guide, very easy to follow. Thank you, David

Collapse
 
franciscomunozs profile image
Francisco Muñoz

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.

Collapse
 
davidteren profile image
David Teren

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.

Collapse
 
franciscomunozs profile image
Francisco Muñoz

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.

Collapse
 
kdiogenes profile image
Kadu Diógenes

Hey, David! Thanks a lot for taking the time to write this, really helpful!