Search⌘ K
Home
Courses
Modern CSS with Tailwind

Retro Designs: Introduction

Explore how to apply Tailwind CSS utility classes to create retro designs in a Rails application. Understand the use of text sizing, headings, and paragraphs as building blocks for effective page layout with Tailwind.

We'll cover the following...

Tailwind project: Retro designs

In this lesson and the following chapters, we’ll be incrementally building the front-end of a Rails application called Retro Designs. This will consist of all the concepts we have learned so far. Below is what our final webpage will look like:

Retro Designs uses many of the Tailwind features we have learned so far. In the previous chapter, we learned about these concepts:

  • Prefixes
  • Headings
  • Paragraphs
  • Text styles

We’ll implement these in our Retro Designs application as shown below:


module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Retro Designs

Explanation

  • Line 3: We use h1 along with text-4xl to change the text size.

  • Line 4: We use h2 along with text-2xl to change the text size.

  • Line 5: We use p for a paragraph.