Rails 6 and Tailwind CSS via Webpacker— Getting Started

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

Image for post
Image for post
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.

Image for post
Image for 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

Image for post
Image for post
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

Image for post
Image for post
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

Written by

Former Audio Engineer, Sound Designer & Music Producer turned Software Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store