When starting a new application, I like to establish base styles that make the interface visually appealing from the beginning. A well-designed foundation ensures that working with the application feels pleasant rather than frustrating. One of my early steps is to design a simple and functional aesthetic, then implement it using Tailwind CSS and integrate it into the application.

Specifically, when starting a new Rails application, I prefer an approach that leverages Tailwind's @apply directive. This allows me to keep using Rails’ generated scaffolds without manually updating each view file to add Tailwind classes. Let's jump over to my application’s Tailwind CSS file and take a look at how I apply this approach.

Defining a Retro Monochrome Design

From the introductory video, you may recall that the application we’re building follows a retro-inspired, monochrome theme—a black-and-white aesthetic with strong visual contrast. I have already prepared base styles to ensure:

• Consistent focus styles for inputs
• Well-styled buttons for forms
• Basic styling for anchor tags

Now, let's take a look at what these styles have done for our application.

Testing the Initial Styles in the Browser

First, we need to start our development server and load the application.

bin/dev

Before applying styles, our form elements appeared unstructured and cluttered. After reloading the page, we can see a noticeable improvement:

• The UI now has breathing room
• Links have underlines and hover effects
• Buttons have clear focus styles

However, there are still a few additional enhancements we want to make.

Adding Tailwind’s Forms Plugin

To further refine our input fields, we’re going to install the Tailwind CSS Forms plugin. This plugin provides default styling for form elements, making them more consistent and visually appealing.

First, install the plugin:

yarn add @tailwindcss/forms

Next, register the plugin in our Tailwind config file:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Once that’s set up, restart the development server and reload the page. Now, our inputs have clear borders, visually aligning with the button styling. The focus styles also continue to function well.

Adding a Strong Border with a Pixel-Dithered Shadow

From our introductory video, you’ll remember that we want to frame the main content of each page with:

• A bold black border
• A pixel-dithered shadow effect

To implement this, we first wrap our page’s main content in a main tag. This provides a semantic element to apply our styling:

<main>
  <%= yield %>
</main>

Now, let’s define our custom styles in Tailwind. I’ve already prepared these styles, which:

• Apply a thick double border
• Ensure proper padding and positioning
• Use a pseudo-element for the pixel-dithered shadow effect

After implementing these changes, we reload the page. Perfect! Now, every page has a strong visual structure, making our UI look cohesive and polished.

Final Thoughts & Next Steps

Now that we have beautiful default styling, we don’t need to manually modify Rails’ generated view files. This approach allows us to:

• Maintain default Rails scaffolding
• Apply global styles without overriding every view manually
• Ensure a clean, simple, and visually appealing UI

With our base styles in place, the next step is to build our sign-up flow.