Rails 6 and Tailwind CSS via Webpacker— Getting Started

David Teren
Apr 4 · 4 min read

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.

In terminal run

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

Install Tailwind

Create the app/javascript/css directory

Generate the Tailwind config file

Create the application.css file

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

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

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

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

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

Generate a home page to check the setup.

Add a root path to config/routes.rb

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

Start the Rails Server

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

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

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

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

David Teren

Written by

Former audio engineer/producer/sound dude turned #DevOps and now #RubyOnRails #fullstackimposter who spends his free time plotting #tech #disruption.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade