How to Create a Navigation Bar with Tailwind CSS

Here is the complete code how to make a responsive navigation bar with Tailwind CSS in HTML.

Step 1: Setting Up Tailwind CSS

Before creating the navigation bar, ensure Tailwind CSS is properly installed and configured in your project. If not, you can follow the official Tailwind CSS Installation guide.

Step 2: Creating the Basic Structure

A basic navigation bar typically consists of a logo on the left and menu links on the right. Below is the HTML structure for this:

<nav class="flex justify-between p-5 bg-blue-500">
  <div>
    <a href="#" class="text-white text-2xl">Logo</a>
  </div>
  <div>
    <a href="#" class="text-white mx-2">Home</a>
    <a href="#" class="text-white mx-2">About</a>
    <a href="#" class="text-white mx-2">Services</a>
    <a href="#" class="text-white mx-2">Contact</a>
  </div>
</nav>

The `flex` and `justify-between` classes are used to position the logo and the links on opposite ends of the navigation bar. The `p-5` and `bg-blue-500` classes are used to add padding and a background color, respectively. The `mx-2` classes on the anchor tags add horizontal margins to each link.

Step 3: Making the Navigation Bar Responsive

To create a responsive navigation bar, we can use the `lg:flex` class to only display the menu as a flex container on large screens. On smaller screens, we’ll use a “hamburger” icon that will display the menu items when clicked.

Here’s how you can do this:

<nav class="p-5 bg-blue-500">
  <div class="flex justify-between items-center">
    <a href="#" class="text-white text-2xl">Logo</a>
    <div>
      <button class="lg:hidden text-white">☰</button>
      <div class="hidden lg:flex">
        <a href="#" class="text-white mx-2">Home</a>
        <a href="#" class="text-white mx-2">About</a>
        <a href="#" class="text-white mx-2">Services</a>
        <a href="#" class="text-white mx-2">Contact</a>
      </div>
    </div>
  </div>
</nav>

The `lg:hidden` class hides the button on large screens, and the `hidden lg:flex` class hides the menu links on small screens and displays them as a flex container on large screens.

However, at this point, the hamburger icon doesn’t do anything. To make it functional, we need to add some JavaScript.

Step 4: Adding Functionality with JavaScript

Here’s a simple way to make the hamburger icon toggle the menu on smaller screens using Vanilla JavaScript:

<script>
  document.querySelector('button').addEventListener('click', function() {
    document.querySelector('div.hidden').classList.toggle('flex');
  document.querySelector('div.hidden').classList.toggle('hidden');
  });
</script>

This code adds an event listener to the button that toggles the `flex` and `hidden` classes on the div containing the menu links when clicked, effectively showing and hiding the menu.

About Tailwind CSS

Tailwind CSS, a utility-first CSS framework, has gained significant popularity in recent years for its low-level utility classes and highly customizable nature. In this tutorial, we will walk you through how to create a responsive navigation bar using Tailwind CSS.

Conclusion

In this tutorial, we have created a responsive navigation bar using Tailwind CSS and JavaScript. Tailwind’s utility-first classes make it easy to build custom designs without leaving your HTML. With this navigation bar as your starting point, you can easily expand and customize it to fit the needs of your project. Remember, while Tailwind simplifies many aspects of CSS, a solid understanding of CSS fundamentals is necessary to take full advantage of what the framework has to offer.