Slow compile times with Rails 6 + Tailwind 2

[abinoda]

I'm seeing 7+ second compile times with Rails 6 and Tailwind 2. I'm running Node v15.5.0. I've split up my CSS per #443, #2544, and this article, but I'm experiencing the slow compile times any time I change javascript/stylesheets/application.css below (I've tried with and without the .Component class definition so it's not due to @apply.

I just discovered Tailwind and excitedly purchased TailwindUI, but 7+ second compile times in development are a deal breaker. The links I referenced mention folks have successfully reduced compile times to <=1s, which would be workable.

Code

javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"    
import "stylesheets/tailwind"
import "stylesheets/application"

Rails.start()
Turbolinks.start()

javascript/stylesheets/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

javascript/stylesheets/application.css

.Component{
  @apply bg-red-600;
}

body {
  background: yellow;
}

package.json

{
  "name": "goodsoftware",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "autoprefixer": "^9",
    "node-sass": "^5.0.0",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

tailwind.config.js

module.exports = {
  purge: [
    "./app/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}

Compilation log output after body background is changed

[Webpacker] Hash: 73de6a63bc287aba4655
Version: webpack 4.44.2
Time: 7949ms
Built at: 12/27/2020 9:15:47 PM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-e82d6f570995f865dff4.js   5.09 MiB  application  [emitted] [immutable]  application
js/application-e82d6f570995f865dff4.js.map   5.39 MiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]
Entrypoint application = js/application-e82d6f570995f865dff4.js js/application-e82d6f570995f865dff4.js.map
[./app/javascript/packs/application.js] 460 bytes {application} [built]
[./app/javascript/stylesheets/application.css] 607 bytes {application} [built]
[./app/javascript/stylesheets/tailwind.css] 604 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./app/javascript/stylesheets/application.css] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/stylesheets/application.css 696 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./app/javascript/stylesheets/tailwind.css] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/stylesheets/tailwind.css 4.99 MiB {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
    + 4 hidden modules

[firrae]

I am getting this as well except my build times are from 35 to 50 seconds. Nearly identical config. I'm running this through Windows with WSL 2 running Ruby and the dev pipeline.

[damel]

try to use the latest webpacker v6.0.0.beta.2, works good for me. webpack 5.11.1 compiled successfully in 873 ms

[damel]

but need to fix the file package.json to install correct version of webpacker. "@rails/webpacker": "^6.0.0-beta.2" should be "@rails/webpacker": "6.0.0-beta.2" to prevent install 6.0.0.pre.2

[abinoda]

@damel Thanks for the tip. Unfortunately I'm getting an error now:

[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/Users/abinoda/Dropbox/code/goodsoftware/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
    at Object.<anonymous> (/Users/abinoda/Dropbox/code/goodsoftware/config/webpack/development.js:5:30)
    at Module._compile (/Users/abinoda/Dropbox/code/goodsoftware/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (/Users/abinoda/Dropbox/code/goodsoftware/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at loadConfig (/Users/abinoda/Dropbox/code/goodsoftware/node_modules/webpack-cli/lib/webpack-cli.js:753:31)
    at /Users/abinoda/Dropbox/code/goodsoftware/node_modules/webpack-cli/lib/webpack-cli.js:823:48
    at Array.map (<anonymous>)

Here's my package.json:

{
  "name": "goodsoftware",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "6.0.0-beta.2",
    "@tailwindcss/forms": "^0.2.1",
    "alpinejs": "^2.8.0",
    "autoprefixer": "^9",
    "node-sass": "^5.0.0",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

[firrae]

I ended up finding that while it is still not as instant as other frameworks, my issue was more the way my dev env was set up: https://firrae.medium.com/wsl2-ruby-on-rails-and-development-performance-6a36e40bd38b. I'm now fine with my rebuild speed, at least for now while my project is an infant. I'll maybe play with Webpacker 6 in a week or so depending on where I'm at.

[damel]

Forgot to clarify that the update requires additional configuration like including css, etc. See README.md and 6_0_upgrade.md. And later you can use postcss v8, autoprefixer 10 with TW2.
my package.json:

{
  "name": "lomdb",
  "private": true,
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.1",
    "@rails/activestorage": "^6.0.0",
    "@rails/webpacker": "6.0.0-beta.2",
    "stimulus": "^2.0.0",
    "stimulus-reveal": "^1.1.2",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "@webpack-cli/serve": "^1.1.0",
    "autoprefixer": "^10.1.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "tailwindcss": "^2.0.2",
    "webpack-dev-server": "^3.11.0"
  },
  "peerDependencies": {
    "postcss": "^8.2.1"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

[Feeney51]

Git is an open-source, version control tool created in 2005 by developers working on the Linux operating system; GitHub is a company founded in 2008 that makes tools which integrate with git. You do not need GitHub to use git, but you cannot use GitHub without using git.

MyGroundBiz Website

[cupnoodle]

Just a guess, but could it be the purge option that caused slowness?
Can you try remove the purge option from tailwind.config.js and see if this helps?

[evdevdev]

To make this palatable in local development, you should switch to using the webpack-dev-server. The compile times are still slow, but they'll be in the background. More details here. Short sketch of a solution is to add Foreman and create a local dev profile that starts rails and webpack-dev-server in parallel.