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