DEV Community

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

Posted on

How to install Tailwind CSS on Rails 6.0

Head Image

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
Enter fullscreen mode Exit fullscreen mode

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
    ...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

So now you should be ready.

Installation

    yarn add tailwindcss
    # and do 
    yarn list
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

add to file: app/javascript/packs/application.js

    require("css/application.scss")
Enter fullscreen mode Exit fullscreen mode

add to file: postcss.config.js

    require('tailwindcss'),
    require('autoprefixer'),
Enter fullscreen mode Exit fullscreen mode

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' %>
Enter fullscreen mode Exit fullscreen mode

and now do again

    bin/webpack
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

 Some error that I faced along the way.

    ERROR:
    Webpacker configuration file not found...
Enter fullscreen mode Exit fullscreen mode

That was a yarn installation error. I uninstalled yarn and installed it again in the rails directory. That fixed it.

    brew uninstall yarn
Enter fullscreen mode Exit fullscreen mode

    ERROR:
    LoadError: Could not load the 'listen' gem.
Enter fullscreen mode Exit fullscreen mode

ass you probably understand. Rails 6 is requiring listen gem to be installed.

    gem 'listen'
    bundle 
Enter fullscreen mode Exit fullscreen mode

and it will fix this problem as well.


    ERROR:
    Tailwind CSS is not loading.
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
vegafromlyra profile image
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

Collapse
 
developerafan profile image
Perafán

Thanks!

Collapse
 
reepz profile image
Yendrek

app/javascript/css/application.scss

should CSS file be inside Javascript folder?

Collapse
 
tcgumus profile image
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