How to install Tailwind CSS on Rails 6.0

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

Comments

[Asha Balasubramaniam]

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 of require 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

[Perafán]

Thanks!

[Yendrek]

app/javascript/css/application.scss

should CSS file be inside Javascript folder?

[Tuna Çağlar Gümüş]

Yes. Here is my paths;
app/javascript/css/application.scss
app/javascript/packs/application.js

for webpack
config/webpack/
config/webpacker.yml
bin/webpack