Tailwind UI, Tailwind CSS, AlpineJS & Inter Typeface for Ruby on Rails. — Part 1

David Teren
Mar 21 · 4 min read
Image for post
Image for post

In my previous post, we looked at setting up a Rails 6 app and Tailwind. At the time both where still in beta. Since they’ve matured, been widely adopted and include other great tools as part of the ecosystem, now is an excellent time to revisit this topic. This post covers the configuration of Tailwind and some complimentary utilities. In the future parts, we’ll look at PurgeCSS for production readiness and some other goodies.

Adam Wathan & Steve Schoger, the guys behind Tailwind CSS, have also been very busy with Tailwind UI. We look at the setup and the use one of a free sample component.

As part of this tutorial, we’ll install and configure the following:

TL;DR we setup a bunch of stuff for rapid frontend styling and look at optimising for production over several posts.

NOTE: Production-readiness, in the context of this post, relates to optimized CSS and JS.

Production ready comic from monkeyuser.com
Production ready comic from monkeyuser.com

Installation & Setup

Create a new Rails app

rails new tails_on_rails -d postgresql

Install Tailwind CSS & Plugins

yarn add tailwindcss
yarn add @tailwindcss/ui

Install Alpine.js

yarn add alpinejs

Configuration

Initialize Tailwind CSS creating the tailwind.config.js file.

npx tailwindcss init

Add the following to postcss.config.js

require('tailwindcss'),
require('autoprefixer'),

Your postcss.config.js the file should like something like this.

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

In the app/javascript directory, create a stylesheets directory and in there add a file named. application.scss

Add the following to app/javascript/stylesheets/application.scss

@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";

In app/javascript/packs/application.js add the following.

require("alpinejs")
import '../stylesheets/application.scss'

application.js Should look something like this.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("alpinejs")
import '../stylesheets/application.scss'

Add the Inter typeface — optional

The Tailwind UI team use the beautiful Inter font for the examples. In the docs, they refer to using the variable option, which I could not get working so I opted for the standard Google Fonts version. Still, it’s a great font.

In app/views/layouts/application.html.erb add the following to the head tag.

<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">

In tailwind.config.js add the @tailwindcss/ui plugin and Inter typeface.

const defaultTheme = require('tailwindcss/defaultTheme')module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/ui'),
]
}

Verify the setup in Rails

Create the database

rails db:create

Disable creation of stylesheets & helpers in config/application.rb

config.generators.assets = false
config.generators.helper = false

Create a home page

rails generate controller Home index

Make the home page root by adding the following to the config/routes.rbfile.

root "home#index"

Start the Rails app server

rails server

Start the Webpacker dev server in another terminal tab

bin/webpack-dev-server

Open the app in your browser

 http://localhost:3000

Add some sample code

You can run the following to inject the sample code. (you will need to reformat the code)

echo $(curl https://gist.githubusercontent.com/davidteren/c69acb6179df5ee930e0304297d21440/raw/94cecb96100ff502decb2834c0ac49dc78ecca28/index.html.erb) > app/views/home/index.html.erb

Or copy and paste this into app/views/home/index.html.erb

Refresh your browser.

Image for post
Image for post
Desktop view
Image for post
Image for post
Responsive view

That’s it for now. In part 2 we will look at implementing PurgeCSS and some other handy stuff.

You can also checkout the example repo.


Resources

The following are some great resources for learning.

For a better grasp of HTML, CSS & JavaScript fundamentals I highly recommend the following courses by Brad Traversy;

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

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