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

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

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

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

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

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

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

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