Before building the view to show a habit, we'll tweak the application layout that Rails generated for us, so we have a nice area in the middle of the page to work with.

Open the application.html.erb file under the views directory, and update the <main> tag to add the following classes.

<main class="mx-auto mt-28 w-96 p-5 border rounded">
  <%= yield %>
</main>

Don't worry if they look confusing. All we're doing is center-aligning the main tag (with mx-auto and w-96), adding some padding (p-5) and margin (mt-28), and wrapping it inside a rounded border. Makes sense?

Now that we have a sandboxed area to play with, let's add a view to display the habit. For the HabitsController#show action, Rails will assume the location of the view file to be under views/habits directory, in a file named show.html.erb.

Let's open that file and add the following code to it. To add some extra spice to our habit tracker, I've added the streak markers below the habit, similar to how GitHub shows your commit streak. This will motivate us to follow the habit every day.

<div class="text-center font-bold text-gray-700" id="habit-name">
  <%= @habit.name %>
</div>

<div class="mt-3 flex justify-center items-center space-x-5">
  <button class="btn bg-red-300 inline-block shadow-lg">-</button>
  <div class="text-4xl font-bold"><%= @habit.count %></div>
  <button class="btn bg-green-300 inline-block shadow-lg">+</button>
</div>

<div class="mt-3 p-2 flex justify-center space-x-1">
  <% @habit.count.times do %>
    <div class="inline-block border p-1 bg-green-400"></div>
  <% end %>
</div>

WARNING: If you haven't used Tailwind, this HTML might hurt your eyes. This is normal. That's how I first felt when I saw Tailwind last year. Trust me, it won't take too long before you fall in love with it.

Note: Don't copy + paste any code. Type everything by hand. As you type each class, save and refresh the browser to see the changes taking effect. The bin/dev command we used to launch the web server also compiles the Tailwind class names to actual CSS, so you should instantly see the changes.

It's a magical experience. Soon, once you get the muscle memory for Tailwind class names, the development will become so much more productive and enjoyable.

One last thing: do you see the btn class on the <button> elements? It's not a Tailwind class. I added that so we could group the common styles for frequently used components and reuse them. To add it, we'll open the application.tailwind.css file and add the following code to it.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply rounded-lg py-1 px-3 inline-block font-medium cursor-pointer shadow;
  }
}

The class names should be self-explanatory. If you don't understand something, refer to the Tailwind CSS documentation.

Alright, we've finished the basic setup for this project. At this point, we have scaffolded the counter with a model, routes, controller, and views. Life's good.

Now visit localhost:3000/habits/1, you should see our habit with the initial count.

However, it's not working yet. Nothing happens when you click the buttons.

Let's fix it.