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

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

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:

• Tailwind CSS core dependencies.
• Tailwind UI to try out the free sample components and it includes custom-forms
• Alpine.js a lightweight JS framework that’s like Tailwind for JavaScript. Tailwind UI uses
• Inter Typeface a carefully crafted typeface, designed for computer screens.

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.

Installation & Setup

Create a new Rails app

rails new tails_on_rails -d postgresql

Install Tailwind CSS & Plugins

Edit: With the new version 6.1 of Rails and the new TailwindCSS 2.0 these steps are no longer valid.

Please see here to setup TailwindCSS 2.0 with Rails 6.1

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.

Desktop view

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.

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

Resources

The following are some great resources for learning.

• Learn Tailwind CSS for free a great short course on Scrimba
• Learn Alpine JS for free another tremendous short course on Scrimba

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

• Modern HTML & CSS From The Beginning (Including Sass)
• Modern JavaScript From The Beginning