Freaking Rails 6.1, webpacker 6, tailwind 2.0, postcss 8.x – how to make it work?

Recently I’ve spent 11 hours and 57 minutes to solve the issue with this stack (rails 6.1, webpacker 6, tailwind 2.0 and postcss 8). I wanted to upgrade from webpacker 4 and have fresh libs (Im writing it on feb/march 2021). Unfortunately life wasnt so easy to me, so I ended with old libs and also I’ve sent issue to webpacker team, that „something is no yes” and I cant configure my repo to work with fresh tailwind, postcss, have hot reload etc. Here is my problematic repo

OK If you are here its mean that you are looking for solution, not my soap story, to dive in to all changes

Small changes – huuuuuuge workflow

Ok, after initialization of new rails app, make some changes:

# Gemfile
gem 'webpacker', '6.0.0.beta.6'

#package.json
"@rails/webpacker": "^6.0.0-beta.5" 
# or add via yarn on npm

# run
bundle install
yarn install

# after installation run:
bundle exec rails webpacker:install # it will generate/overwrite new files in config/webpack/ choose to overwrite if you dont have any custom changes or just see the diff

with webpacker 6 new structure of files are presented. before your js were in app/packs/javascripts, now it changes to:

app/packs:
  ├── entrypoints:
  │   # Only webpack entry files here
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

Change your structure to the new one, put application.js / application.scss in this directory and thats it.

Tailiwing here I come…

Ok time for configuring tailwind 2.0.x

yarn add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

and in those files make this changes:

# app/packs/entrypoints/application.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

#postcss.config.js
require('autoprefixer'),
require('tailwindcss'),

And probably thats it, everything shoud work just as is – here you can check the diff between initial commit of fresh rails 6 app and app after configuration / installed needed libs. Also you can notice, that as a bonus I’ve used custom observer of changes in haml and yml located in config/locales/ and app/views/ – so when you make any chnages on those files, webpack-dev-server automatically will reload server – nice right?

If you have any question – you know where you can find me – I’ll be glad to help you.

Special thanks to rossta Ross Kaffenberger who showed where were the errors with my previous configuration (here and here)

——————————— update 21.07.21 ——————-

Well again tried to use tailwindcss on existing project. Copied configuration files from old project to new…. and it didnt work ;(. So my issues

First of installed fresh packages:

yarn add tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio alpinejs@latest

Then copied old(sic!) configuration file of tailwind.config.js and had issues with:

ERROR in ./node_modules/@fortawesome/fontawesome-free/scss/solid.scss
 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
 ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
 TypeError: Cannot convert undefined or null to object
     at Function.entries ()
     at flattenColorPalette (/Volumes/Accounts/rafath/projects/webinars/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:67)

So I’ve freshly initialize new tailwind configuration:

npx tailwindcss init --full

also added new things to the tailwind.config.js:

mode: 'jit',
purge: {
  enabled: ['production', 'staging'].includes(process.env.NODE_ENV),
  content: [
    './app/views/**/*.html.haml',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
},

also moved from devDependencies to dependencies

"postcss": "^8.3.5",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.0",
"postcss-loader": "^5.0.0",
"postcss-preset-env": "^6.7.0",

strange thing is that in other project I’ve those entries in devDependencies… so dont know what is going on ;/.

I’ll try to create fresh rails project and start from scratch….

Rafath Khan

Tu powinien być pean na moją cześć, jaki to wspaniały jestem i jakimi niezwykłymi problemami się zajmuję, ale prawda jest taka, że jak każdy człowiek - mam swoje wady i może jakieś zalety. Są momenty, kiedy mam odpowiednią ilość zasobów psychoenergetycznych i mogę przenosić góry, a są niestety i takie momenty, kiedy mi się nawet z łóżka wstać nie chce... nie może tak źle nie jest, ale chętnie bym sobie pospał dłużej... Niemniej jednak, gdy uda się pokonać siebie - satysfakcja jest, ale potem przychodzą kolejne rzeczy, z którymi trzeba się zmierzyć... a na nie, niestety, energii może nie starczyć i tu właśnie wkracza tzw samodyscyplina - powinieneś usiąść i zrobić to coś, a nie siedzieć na kanapie i zajadać się słodyczami i oglądać jakiś nieciekawy serial czy film dla spalenia swojej najważniejszej waluty świata... czasu, którego nie da się odzyskać. I właśnie o tej samodyscyplinie traktować będę na tym blogu + kilka innych tematów, które są mi potrzebne do pracy