Rails 6 and Tailwind CSS via Webpacker— Getting Started

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

Photo by Ales Nesetril on Unsplash

Recently I started work on a new Rails app and opted for version 6 albeit still in beta. One of the main drivers behind this decision is the availability of ActiveStorage::Blob#open but that is for another post.

To be honest, it’s not an entirely new app, rather an attempt to re-write my first sullied attempt at a Rails app done some three years ago, this time round attempting to adhere to the Rails Way.

As this project would use server-side rendered views and require rapid development with little or even no UI/UX guidance I figured there’s no harm in taking some notes from Adam Wathan & Steve Schoger’s book, Refactoring UI. It’s a handy book written for developers who “know something looks terrible but have no idea why.”

Add to this the arrival of the Tailwind CSS v1.0 beta. I’ve been following its development for the last year and considering the aforementioned Adam and Steve have a hand in Tailwind’s development, it’s a no brainer that it could be the ideal tool of choice for styling duties.

Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces.

Enough banter lets get started.

Create a new Rails 6 app

Requires Rails 6. You can install it with the following commands.

git clone https://github.com/rails/rails.git
cd rails
bundle install

In terminal run

rails new my_tails_app -d postgresql

If this is your first time creating an app with Webpacker, don’t be surprised when it seems like node is downloading most of the internet into `node-moules/`
This is to be expected.

Change into the app directory

cd my_tails_app

Install Tailwind

yarn add tailwindcss --dev

Create the app/javascript/css directory

mkdir app/javascript/css

Generate the Tailwind config file

yarn tailwind init app/javascript/css/tailwind.js

Create the application.css file

touch app/javascript/css/application.css

Paste the following into app/javascript/css/application.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Add the `stylesheet_pack_tag` to `app/views/layouts/application.html.erb`

# Add it after the javascript_pack_tag
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Add the following to `app/javascript/packs/application.js`

import '../css/application.css'

Add the requires to the postcss.config.js file found in your app root.

require('tailwindcss')('./app/javascript/css/tailwind.js'),
require('autoprefixer'),

The postcss.config.js file should look something like this.

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('tailwindcss')('./app/javascript/css/tailwind.js'),
        require('autoprefixer'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3
        })
    ]
};

Generate a home page to check the setup.

rails g controller home index

Add a root path to config/routes.rb

root 'home#index'

Before starting the Rails Server let’s create the db.

rails db:create

Start the Rails Server

rails s

In your browser go to http://localhost:3000

You should see the Home#index page.

Let’s test the Tailwind install by replacing the contents of app/views/home/index.html.erb with

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

After a page refresh, you should see a card like this one.

That’s it. Go read the Tailwind docs to find out more about this awesome CSS framework and style your app to your heart's content.

I’ve added a Rails 6 & Tailwind repo with some other extras here.

EDIT: For an updated version of this post see: Production-ready Tailwind UI, Tailwind CSS, AlpineJS & Inter Typeface for Ruby on Rails. — Part 1

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8