Revision history [back]

The steps to create a fixed navigation bar using Tailwind CSS utility classes are:

1. Add the necessary HTML markup for the navigation bar.

2. Apply the "fixed" class to the navigation bar container to make it fixed.

3. Apply the "w-full" and "bg-white" classes to make the navigation bar container full-width and set its background color to white.

4. Apply the "shadow-lg" class to add a shadow effect to the navigation bar container.

5. Apply the "flex" and "justify-between" classes to the navigation bar items container to align the items in a row and evenly space them.

6. Apply the "py-4" class to add padding to the top and bottom of the navigation bar items container.

7. Apply the "mx-4" class to add margin to the left and right of the navigation bar items container.

8. Add the necessary navigation bar items as HTML markup within the navigation bar items container.

9. Apply the "px-3" class to add padding to the left and right of each navigation bar item to add spacing.

10. Apply the "text-gray-600" and "hover:text-black" classes to the navigation bar item links to set the default and hover colors, respectively.

11. Apply the "font-bold" class to the active navigation bar item link to make it bold.

12. Style the navigation bar as desired using additional Tailwind CSS utility classes.

Example Code:

<nav class="fixed w-full bg-white shadow-lg">
  <div class="container mx-auto flex justify-between py-4 px-4">
    <a class="font-bold" href="#">Logo</a>
    <ul class="flex">
      <li>
        <a class="px-3 text-gray-600 hover:text-black" href="#">Home</a>
      </li>
      <li>
        <a class="px-3 text-gray-600 hover:text-black font-bold" href="#">About</a>
      </li>
      <li>
        <a class="px-3 text-gray-600 hover:text-black" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>