Heads up, this content is in beta. Use at your own risk!
Navigation bars are a crucial part of any website, allowing users to navigate through different sections with ease. In this tutorial, we’ll be creating a responsive navigation bar using Tailwind CSS.
Here’s the basic structure of our nav bar:
<nav class="bg-gray-800"> <div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8"> <div class="relative flex items-center justify-between h-16"> <div class="flex items-center px-2 lg:px-0"> <div class="flex-shrink-0"> <img class="w-8 h-8" src="https://source.unsplash.com/random/32x32" alt="Logo" /> </div> <div class="hidden lg:block lg:ml-6"> <div class="flex space-x-4"> <a href="#" class="px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-md" >Home</a > <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white" >Features</a > <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white" >Pricing</a > </div> </div> </div> </div> </div> </nav>
In this example, we have a
nav element with a dark gray background (
bg-gray-800). Inside, we have a container
div that controls the maximum width (
max-w-7xl), centers the content (
mx-auto), and applies responsive horizontal padding.
Within the container, we have another
div that establishes a flex container. It includes the logo and navigation links. The logo is an
img element contained within a
div that prevents it from growing (
flex-shrink-0). The navigation links are within another
div that is hidden on smaller screens (
hidden lg:block) and has left margin on larger screens (
Each navigation link is an
a element with classes for text color, hover effects, padding, border radius, text size, and font weight. The “Home” link is visually distinguished with a darker background (
This is a basic implementation of a responsive navigation bar with Tailwind CSS. You can add more interactive elements or adjust the design to match your specific needs. Tailwind’s utility-first classes make it easy to customize your nav bar on the fly, and its mobile-first approach ensures your design is responsive.