Skip to main content

How to install Tailwind CSS using Webpacker with Rails Discussion

General • Asked by Chris Oliver
9a7cd672f2275ae645751d3827e2b5be

Nice addition to GoRails episode list. Would love to see more TailwindCSS with Rails videos. Also thanks for plugging your laptop power in...I was starting to panic :D

Ce795239ba5dd2384fc2f88ffaff5451

Hahaha I noticed that too while editing. Forgot I was recording without power. :P


F790d6d3f1a75a30f6e525890f1d1964

Hi Chris, thanks for the interesting tutorial. I had not heard about tailwind before. Even though I like the end result I ask myself if a sass mixin library that offers the same micro classes wouldn’t also do the trick while staying close to the rails intended way of writing css. What do you think? Could one implement something like tailwind-sass and get the same benefits (plus smaller file size by default)?


00a6a5557fc0677f005aed164fe5df8d
Stephen Miles MacLennan

Awesome video, tailwind looks amazing! Just a heads up, the link to the Youtube video for the building coinbase tutorial seems to be outdated (Youtube has moved it out of the 'live' category I think). Heres the link for the non-live version https://www.youtube.com/wat...

Ce795239ba5dd2384fc2f88ffaff5451
Thanks Stephen! Good catch on the YouTube URL.

Fee99543e5b1715d74570734bd2edc80

.postcssrc file explained in this video causes a warning regarding the @apply rule. Warning disappears if tailwind is loaded before postcss-next

https://github.com/tailwind...

0c4e684fb184137914d121f548efddea
Thanks for this. It helps me quite a bit!


D08289eccd25ac6722f84ac561091e09
Awesome episode, I did everything step by step and it works fine but I'm experimenting some delay or blink on page reload with images. I think its related to how I'm using css assets with webpacker.

Some one with the same errors?

112dd0b8d8b9af0e45fd5daca0a23401

Anyone finding application.css is not found in the webpacker manifest.json?

Module not found: Error: Can't resolve '../css/application.css'
4e38576be1bb5040219d1ede2462c9dc
Yes the app don't work... screenshot :-( . You have solved? I have solved i lost to charge app/javascript/css/application.css

0c4e684fb184137914d121f548efddea
I deleted a separate thread I started in the JS section as I didn't realize this one existed. 

In a nutshell, I love Tailwind and would like to use it for a forthcoming project but can't get it to deploy via Heroku. Everything appears to install correctly until compile. At that point, the logs indicate an error when loading tailwind module.

Has anyone successfully deployed to Heroku or AWS Codestar?

Ce795239ba5dd2384fc2f88ffaff5451
As far as Heroku goes, I had to add the nodejs buildpack to my Rails app so it would properly compile Webpacker with Ruby. You basically end up with both the Ruby and Node buildpacks and that gives all the Ruby and Node/Yarn versions required to get things going.

0c4e684fb184137914d121f548efddea
Thanks Chris. 

I've got the buildpacks installed and executing in order (Node, then Ruby). Deployment is normal until compile where it's throwing the following error in log:

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css 
remote: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

I'm assuming I need a webpack.config.js in root (which I've added):

var tailwindcss = require('tailwindcss'); 
module.exports = { 
   plugins: [
       tailwindcss('./app/javascript/src/tailwind.js'), 
       require('autoprefixer') 
   ]
 }

I'm getting there.... :-)

0c4e684fb184137914d121f548efddea

SUCCESS!

A single sentence found on the github repo for webpacker rails gem solved my issue. 

"Remember to set NODE_ENV environment variable to production during deployment or when running this rake task."

Alas, this was all I needed to run via CLI:

NODE_ENV=production ./bin/webpack

A95866744235220d493f4ae04c568e98
Off topic, but Chris, how did you manage to get hot-reloading work with a simple Rails s command, without launching WP as a separate process?
A0cfc5892bd0806b6db62d56e51b394f
You do have to have the webpack-dev-server running separately. I usually use foreman to manage that. Without it, it won't hot reload in development, but you can have Rails automatically compile the files in-process like it does with the asset pipeline if you don't run the separate dev server.
A95866744235220d493f4ae04c568e98
watch the video c l o s e l y 

A4fd13f999326b458f21e8e0b15d0752
Thanks for the awesome video Chris! I took the time to encapsulate some of this behavior into a gem to easily integrate with Rails - https://github.com/IcaliaLabs/tailwindcss-rails - enjoy!
Ce795239ba5dd2384fc2f88ffaff5451
Awesome, Abraham! Thanks for sharing!

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.