Modern CSS with Tailwind

Quick Start

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 app, so there’s no server-side information needed to explain this. (If you’re running the sample code, the page should be visible at http://localhost/3000.)

Here’s our first version:

main/app/views/home/intro.html.erb

<h1>Welcome to NorthBy</h1>

You should see no styling applied to the text at all, not even the normal size and bold styling you’d usually associate with an HTML h1 tag. This is a good test of whether ...