Building a simple one column blog using Tailwind CSS part 2 - Header and menu

In part 1, we learned that Tailwind is a utility-first CSS framework. To style elements with a utility-first approach, we apply pre-existing css classes to elements on your page. We compose the look and feel of our site from a set of granular css class rules.

Let’s get some practice. Change the H1 tag as follows:

<h1 class="text-2xl text-center uppercase tracking-widest">One Column Blog</h1>

Refresh your browser and you should have a large, centred, uppercase blog title with wide spacing.

Each class applied to the H1 tag has a single responsibility. Each class changes one css property. The names of the classes in Tailwind are descriptive so that you can almost guess what each one does from the name alone.

For example, using text-2xl changes the size of the heading. The sole responsibility of this class is to adjust the size of the text inside the element.

The other classes are similar. Each changes our one aspect of our element.

This is the utility first approach. It encourages us to compose our layouts and styles using descriptive classes. If you aren’t used to a utility first approach, it might seem strange at first.

You might be more used to defining a class name such as main-header which would encompass all the css needed to style your header.

That seems tempting at first because you end up with less markup in your HTML, but it creates brittle css with class names that do not describe what they do and often class names that cannot be reused because they are tightly coupled to the display of one single element on your page.

Adding the menu

To get more practice, let’s create a simple menu for our blog layout. Before any styling, sketch out the structure for the menu and nav bar. Enclose the h1 in a <nav> element and set up an unordered list with three items:

<nav>
 <h1 class="text-2xl text-center uppercase tracking-widest">One Column Blog</h1>
  <ul>
    <li><a href="/#">Home</a></li>
    <li><a href="/#">About</a></li>
    <li><a href="/#">Links</a></li>
  </ul>
</nav>

You should end up with an unstyled list left aligned under your title

Tailwind ships with a predefined colour palette and makes it easy to specify colours using utility classes. Background colours take the form bg-<colour_name>-<shade>.

Add a light grey background to the nav bar element.

<nav class="bg-gray-50">

You can experiment with different shades and colours

To centre the list of menu items, add a class to the ul.

<ul class="text-center">

Style the list items with inline-block to bring our menu items onto a single line.

<li class="inline-block"><a href="/#" >Home</a></li>
<li class="inline-block"><a href="/#" >About</a></li>
<li class="inline-block"><a href="/#" >Links</a></li>

To illustrate how Tailwind lets you control padding, we’ll add some vertical padding to the top of the menu and also a little horizontal spacing between each list item.

<ul class="text-center pt-2">
  <li class="inline-block px-4"><a href="/#" >Home</a></li>
  <li class="inline-block px-4"><a href="/#" >About</a></li>
  <li class="inline-block px-4"><a href="/#" >Links</a></li>
</ul>

The addition of pt-2 to the unordered list classes adds padding to the top of the element. Adding px-4 on each list item creates horizontal padding. The utility class are easy to remember; pt padding top and px padding on x axis. You can extrapolate and guess that pb would add padding to the bottom of an element.

Tailwind has a default spacing scale. So the numeric suffixes on our padding classes map to specific pixel values. For our top padding, the suffix of 2 equates to 8px and 4 for our horizontal padding equates to 16px. You can increase and decrease the padding simply by changing the number, for example, using pt-6 would give you a top padding of 24px.