How to install Tailwind CSS on Rails 6.0
Tags: tailwindcss, rails, install, webpack
Published: 2019-12-16 20:07:45

![Head Image](https://thepracticaldev.s3.amazonaws.com/i/u8dhj1cp21nh0mc8bxqc.png)

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.

```ruby
    % 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.

```ruby
    % 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;

```ruby
    brew install yarn 
    # to check installation do
    yarn --version
```

So now you should be ready.


### Installation

```ruby
    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`
    
```ruby
    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";
```

add to file: `app/javascript/packs/application.js`
```ruby
    require("css/application.scss")
```
add to file: `postcss.config.js`
```ruby
    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`

```css
    <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

and now do again
```ruby
    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.
```html
    <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.
```bash
    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.
```bash
    brew uninstall yarn
```
---
```bash
    ERROR:
    LoadError: Could not load the 'listen' gem.
```
ass you probably understand. Rails 6 is requiring listen gem to be installed. 
```ruby
    gem 'listen'
    bundle 
```
and it will fix this problem as well.

---
```bash
    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. :+1:

Best regards,
Tuna