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

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

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

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

Module not found: Error: Can't resolve '../css/application.css'

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'

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

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

NODE_ENV=production ./bin/webpack

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.

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.

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.