В современной веб-разработке создание привлекательной и функциональной панели навигации (navbar) имеет важное значение для обеспечения бесперебойной работы пользователя. Tailwind CSS, популярная платформа CSS, ориентированная на утилиты, предоставляет полный набор классов и утилит, которые упрощают создание стильных и адаптивных навигационных панелей. В этой статье мы рассмотрим различные методы создания панели навигации с помощью Tailwind CSS, а также приведем примеры кода.

Метод 1: базовая структура панели навигации
Давайте начнем с базовой структуры панели навигации с использованием классов HTML и Tailwind CSS:

<nav class="bg-gray-800">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="text-white text-lg font-semibold">Logo</a>
      </div>
      <div class="flex">
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Home</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">About</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Services</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Contact</a>
      </div>
    </div>
  </div>
</nav>

Метод 2: раскрывающееся меню.
Чтобы добавить раскрывающееся меню на панель навигации, мы можем использовать утилиты groupи hidden, предоставляемые Tailwind CSS:

<div class="flex">
  <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Home</a>
  <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">About</a>
  <div class="group inline-block relative">
    <button class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md focus:outline-none">Services</button>
    <div class="hidden bg-gray-800 text-white text-sm mt-2 rounded-md">
      <a href="#" class="block px-4 py-2 hover:bg-gray-700">Service 1</a>
      <a href="#" class="block px-4 py-2 hover:bg-gray-700">Service 2</a>
      <a href="#" class="block px-4 py-2 hover:bg-gray-700">Service 3</a>
    </div>
  </div>
  <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Contact</a>
</div>

Метод 3: адаптивная панель навигации
Tailwind CSS предоставляет адаптивные классы, которые позволяют нам создать полностью адаптивную панель навигации. Вот пример адаптивной навигационной панели с использованием классов lg:hiddenи lg:flex: