No Time Dad

A blog about web development written by a busy dad

Simple Tailwindcss Navbar

I think it took me less than 10 minutes to create this simple navbar with Tailwindcss. I realize that comes off as bragging, but I think it’s actually a testiment to the library itself. It really makes development with html and css fast. As a person who doesn’t have much free time, fast development is important to me.

I’ve decided to explore tailwindcss more to try and figure out if it’s a good fit for me. I really enjoy writing vanilla css and it does feel like I’m relinquishing some control by using Tailwindcss, but I’m curious to see if that opinion will change. Especially if I can increase my output using Tailwindcss.

Something that has always been glaringly obvious to me about Tailwindcss is that a strong prior knowledge of css is needed to use this library. I think people without that knowledge base will struggle with the library. Tailwindcss provides amazing helper classes, but if the underlying concepts are not understood then you’ll likely spend a lot of time researching why a particular layout or style isn’t working as you expected.

I thought a simple navbar with Tailwindcss would be a good starting point for my tailwind adventure. I just wanted to build a basic navbar that featured a header, some links, and a sign up button. These are all common elements for most navbars these days.

This version of the navbar won’t be fully responsive since implementing dropdown menus could be its own blog post, but I’d like the links in the middle of the navbar to hide on small screens.

Building the navbar

I like to start by building the basic structure of my elements, then continue on with the inner elements. This is a “top down” approach that works well for me. I’ll start with the navbar container div and the header text.

This navbar will utilize flexbox, which Tailwindcss has a utility class flex for. Flexbox will help me vertically and horizontally align items in the navbar. I’ll be using Tailwind’s justify-between, equivalent to justify-content: space-between, to push the links to the center of the navbar and a sign up button to the right.

<div class="flex justify-between items-center bg-blue-900 p-2">
  <a href="#main" class="text-xl font-bold no-underline text-blue-100 hover:text-blue-200">Bored.io</a>
</div>

Most navbars for applications have an icon or logo to identify themselves. I’ll add a random icon from heroicons before the large text.

<div class="flex justify-between items-center bg-blue-900 p-2">
  <a href="#main">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
    </svg>
  </a>
  <a href="#main" class="text-xl font-bold no-underline text-blue-100 hover:text-blue-200">Bored.io</a>
</div>

It’s immediately apparent that there’s a problem, though. The svg icon and the large text alignment is off. Luckily, I can use flexbox to fix this easily. I’ll wrap both the icon and text in a div and initialize flexbox via Tailwind’s flex class along with items-center. The latter utility class will center the text vertically with the icon. I’ll also add a small amount of padding to the large text via tailwind’s pl-2 utility class, which is equivalent to padding-left: 2rem.

<div class="flex justify-between items-center bg-blue-900 p-2">
  <div class="flex items-center">
    <a href="#main">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
      </svg>
    </a>
    <a href="#main" class="pl-2 text-xl font-bold no-underline text-blue-100 hover:text-blue-200">Bored.io</a>
  </div>
</div>

The next elements I need to add are the links. I mentioned it previously, but I’d like the links to be hidden on smaller screens. Tailwindcss has modifier classes that help with responsive design. Appending sm:, md:, lg:, or xl: will apply a given class based on the screen size. Tailwindcss is mobile first, so I’ll start by creating a div with the class hidden on it for the links. Then, I can add md:block to the same div to have the links show up on screens that are medium and larger.

The div that holds the links will be a flexbox container to help with spacing. I’ll also use Tailwindcss’ handy space-x-4, which add space between items on the x-axis.

<div class="flex justify-between items-center bg-blue-900 p-2">
  <div class="flex items-center">
    <!-- Header icon and text -->
    ...
  </div>
  <div class="hidden md:block flex items-center space-x-4">
    <a href="#products" class="no-underline text-blue-100 font-semibold hover:text-blue-200">Products</a>
    <a href="#products" class="no-underline text-blue-100 font-semibold hover:text-blue-200">Pricing</a>
  </div>
</div>

So, there is another problem now. I’d like the nav links to be in the middle, but they’re pushed all the way to the right. The reason for this is because I’m using justify-between with only two elements in the flexbox container. This means that the elements will be pushed to opposite ends.

To fix this, I just need to add a third element to the flexbox container. This element will be a sign up button.

<div class="flex justify-between items-center bg-blue-900 p-2">
  <div class="flex items-center">
    <div class="flex items-center">
      <!-- Header icon and text -->
      ...
    </div>
  </div>
  <div class="hidden md:block flex items-center space-x-4">
    <!-- Nav links -->
    ...
  </div>
  <button type="button" class="bg-blue-100 py-2 px-3 text-blue-900 hover:bg-blue-200 rounded">Sign up</button>
</div>

Conclusion

That felt easy. I know there are some common complaints about the maintainability of Tailwindcss utility classes, but I’m not convinced it’s more work than maintaining standard css. I’ve worked with some pretty ugly css files that would rival the most complicated utility class element.

Demo & final code

<div class="flex justify-between items-center bg-blue-900 p-2">
  <div class="flex items-center">
    <a href="#main">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
      </svg>
    </a>
    <a href="#main" class="pl-2 text-xl font-bold no-underline text-blue-100 hover:text-blue-200">Bored.io</a>
  </div>
  <div class="hidden md:block flex items-center space-x-4">
    <a href="#products" class="no-underline text-blue-100 font-semibold hover:text-blue-200">Products</a>
    <a href="#products" class="no-underline text-blue-100 font-semibold hover:text-blue-200">Pricing</a>
  </div>
  <button type="button" class="bg-blue-100 py-2 px-3 text-blue-900 hover:bg-blue-200 rounded">Sign up</button>
</div>