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

xx