Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I create a responsive navigation menu using Tailwind's flex utilities?
Asked on Jan 17, 2026
Answer
To create a responsive navigation menu using Tailwind's flex utilities, you can leverage the `flex`, `justify-between`, and responsive classes like `md:flex-row` to adjust the layout based on screen size.
<!-- BEGIN COPY / PASTE -->
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="text-white text-lg">Brand</div>
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 mt-2 md:mt-0">
<li><a href="#" class="text-white">Home</a></li>
<li><a href="#" class="text-white">About</a></li>
<li><a href="#" class="text-white">Services</a></li>
<li><a href="#" class="text-white">Contact</a></li>
</ul>
</div>
</nav>
<!-- END COPY / PASTE -->Additional Comment:
- The `flex` class is used to create a flexible container that can change direction with `flex-col` and `flex-row`.
- Responsive classes like `md:flex-row` adjust the layout for medium screens and above.
- Spacing utilities such as `space-y-2` and `space-x-4` help manage vertical and horizontal spacing between items.
- Ensure the navigation is wrapped in a container for consistent alignment and spacing.
Recommended Links:
