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.