Hello all,
I recently tried to upgrade my rails app from 5.2.3 to 6.0.0. The main reason for that to have a webpacker to play with. Webpacker is a manager for app-like JS modules and Tailwind CSS is one of them. I choose Tailwind CSS for my webpacker test project since I also wanted to learn it.
I actually started webpacker - tailwind installation on my rails 5.2.3 but it got complicated quickly and also I didn't like the outcome of my platform. There were lots of config files calling one another. I was using old and new stylesheets at the same time which is not a clean approach.
The lucky thing for me, Rails 6 is now using Webpacker as a JavaScript compiler instead of an old assets pipeline aka Sprockets. I decided it's time for the upgrade my system to the new version and using Tailwind CSS in it. I thought it will be much more optimized and bug-free. Additionally, I believe it is a better approach to implementation.
Before you start
Be sure that rails is working and installed.
% rails --version
Rails 6.0.0
Be sure webpacker installed and working. If you get an error when you do this. Head over to the end of the page. I shared some of the problems and their fixes at the end of the page.
% bin/webpack
warning package.json: No license field
Hash: b16157b01cbbb4d9c379
Version: webpack 4.41.2
Time: 5261ms
Built at: 2019-12-16 20:41:05
...
Be sure yarn and node are installed.
But be careful. I really didn't want to spoil my codebase with MBs of node_modules. So I didn't really installed the node.js from node download page. I just installed the yarn which has a dependency with node. So it only installs the needed node elements which a much better and cheaper option.
For mac;
brew install yarn
# to check installation do
yarn --version
So now you should be ready.
Installation
yarn add tailwindcss
# and do
yarn list
and find tailwindcss on the list. Since webpacker has a dependency for postcss-import we will go with the @import
method instead of @tailwind
method when calling the tailwindcss.
Go app/javascript/css/application.scss
file.
As I unnecessarily mentioned I upgraded from rails 5.2.3 to 6. This file was not there and tailwindcss skipped creating it. If there is no application.scss in your path, create it.
So, time to edit some pages. To file: app/javascript/css/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
add to file: app/javascript/packs/application.js
require("css/application.scss")
add to file: postcss.config.js
require('tailwindcss'),
require('autoprefixer'),
go to your application layout page add 2 new lines in the head. In my case it was file: app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
and now do again
bin/webpack
look over the output and see your pack/application.js
is called.
That should be it. Now you can go and try your Tailwind CSS. This is a good example to try it out. Copy code to your app/views/layouts/application.html.erb
page. Start your server and check it out.
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>
</div>
Some error that I faced along the way.
ERROR:
Webpacker configuration file not found...
That was a yarn installation error. I uninstalled yarn and installed it again in the rails directory. That fixed it.
brew uninstall yarn
ERROR:
LoadError: Could not load the 'listen' gem.
ass you probably understand. Rails 6 is requiring listen gem to be installed.
gem 'listen'
bundle
and it will fix this problem as well.
ERROR:
Tailwind CSS is not loading.
You should check your application.html.erb
file and make sure your pack tags are correct.
Ok. That's it for me for now. Please let me know if I miss anything. 👍
Best regards,
Tuna
Top comments (4)
This helped unblock me on a side project, thank you!
I had a Rails 6 app working locally with tailwind but it didn't work (aka tailwind was missing altogether) once it was deployed to prod on Heroku. I think it's likely twofold
1) I was using
import
instead ofrequire
in the entry point -packs/application.js
to include the starting point of my react app (need to understand the difference between the two..)2) I had to modify the rails base layout file to use
stylesheet_pack_tag
and reference the new css that was added instead of using the one that comes with rails (app/assets/stylesheets/application.css
)This is my fix for reference
Thanks!
app/javascript/css/application.scss
should CSS file be inside Javascript folder?
Yes. Here is my paths;
app/javascript/css/application.scss
app/javascript/packs/application.js
for webpack
config/webpack/
config/webpacker.yml
bin/webpack