All threads / How to install Tailwind CSS using Webpacker with Rails Discussion
Ask A Question


You’re not receiving notifications from this thread.

How to install Tailwind CSS using Webpacker with Rails Discussion

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

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

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

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

Thanks Stephen! Good catch on the YouTube URL.

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

Thanks for this. It helps me quite a bit!

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?

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

Module not found: Error: Can't resolve '../css/application.css'
Yes the app don't work... screenshot :-( . You have solved? I have solved i lost to charge app/javascript/css/application.css
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?
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.
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: [

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


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
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?
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.
watch the video c l o s e l y 
Thanks for the awesome video Chris! I took the time to encapsulate some of this behavior into a gem to easily integrate with Rails - - enjoy!
Awesome, Abraham! Thanks for sharing!

Tailwind is working with my Rails app, but crashes when I try to extract classes and use the @apply rule.

The error is:
ActionView::Template::Error (Webpacker can't find application.css in /...manifest.json.

I see a postcss.config.js but no .postcssrc.yml.

Webpacker 4.0 now uses the .js configs so they're more flexible than the yml versions.

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    // ...
    // ...

Thanks! Do you use bootstrap and tailwind for the gorails site?

Hey Guys,

I am using rails 5.2 and I followed your instructions. however , I got this error in the chrome console when I am trying to use Tailwind in my app I run on localhost:3000 :

Uncaught Error: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Specified Tailwind config file "/Users/chabel/Desktop/depot/javascript/css/tailwind.js" doesn't exist.
    at _default (:3000/Users/chabell/Desktop/depot/node_modules/tailwindcss/lib/lib/registerConfigAsDependency.js:14)
    at _postcss.default.plugin.config (:3000/Users//chabel/Desktop/depot/node_modules/tailwindcss/lib/index.js:62)
    at creator (:3000/Users/chabel/Desktop/depot/node_modules/postcss/lib/postcss.js:133)
    at Object.<anonymous> (:3000/Users/chabel/Desktop/depot/postcss.config.js:7)
    at Module._compile (:3000/Users/chabel/Desktop/depot/node_modules/v8-compile-cache/v8-compile-cache.js:192)
    at requireFromString (:3000/Users/chabel/Desktop/depot/node_modules/require-from-string/index.js:28)
    at parseJsFile (:3000/Users/chabel/Desktop/depot/node_modules/postcss-load-config/node_modules/cosmiconfig/dist/loadJs.js:15)
    at <anonymous>
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./app/javascript/css/application.css (application.js:16)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/css/application.css (application.css:2)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

I think tailwind.js in javascript/css is empty. here is the code contained in this file:

module.exports = {
  theme: {
    extend: {}
  variants: {},
  plugins: []

Do you any idea sto solve this problem ?
Thanks for your help.

First part of the video seems do be a bit outdated.
helped me getting a rails 5 project running with tailwind.

Even here it needed a change: in application.css change
@tailwind preflight
@tailwind base

then the webpack-dev server compiled successfully

I think you need to add the --full option:

yarn tailwind init app/javascript/css/tailwind.js --full

Hey, I'm constantly getting errors on Rails 6.1 and Tailwind 2:

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
22:23:40 webpack.1 | ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
22:23:40 webpack.1 | - options has an unknown property 'config'.

I upgraded all webpacker and webpack stuff, installed the postcss stuff, but no luck. Is it really THAT hard to use tailwind 2 in a current Rails version?

In 2022 and we have Rails 7 and Tailwindcss 3. This tutorial needs an update.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 68,326+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.