Quick Start

Learn how to add some Tailwind features in a Ruby on Rails project.

We'll cover the following

Overview

We’ll quickly run through styling a hero segment for a sample page for a concert series called NorthBy. The sample page in the code shows all the versions one after the other. This is only a page in the public HTML of our server application. Therefore, there is no server-side information needed to explain this.

Below is our first version:


module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Rails overview

We should see no styling applied to the text, not even the normal size and bold styling we usually associate with an HTML h1 tag.

Tailwind features

Let’s go back and forth between the code and the view to start adding features here with Tailwind. We won’t explore the syntax or other options in depth. All we want is to give a sense of what it is like to work with Tailwind as best as possible in a course format.

The image_pack_tag method is a Rails and Webpacker thing. Our build system likely has a different way of accessing the URL of a file. For example, JavaScript files using Webpack can usually import the file as a module and use the imported value as the URL.

Below is a first pass at getting a basic layout with text, subtext, and a logo:


module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Tailwind features