Tailwind CSS에서 반응형 navbar 구성 요소 빌드

저는 최근 웹 프로젝트에 Tailwind CSS를 꽤 많이 사용하고 있지만 Bootstrap과 같은 다른 고전적인 OOCSS 프레임워크와 비교할 때 한 가지 단점은 바로 사용할 수 있는 구성 요소가 부족하다는 것입니다.



그렇기 때문에 DEV 커뮤니티에서 Tailwind CSS의 유틸리티 클래스를 사용하여 일반적으로 사용되는 구성 요소를 빌드하는 방법에 대한 일련의 기사를 시작했습니다.

지난번에 a를 만드는 방법을 보여드렸고 오늘은 내비게이션 바를 만드는 방법을 보여드리고자 합니다.

시작하자.

Tailwind CSS 탐색 모음

우선 nav 태그를 사용하여 스타일을 지정하기 전에 HTML 코드를 빌드해야 하며 그 안에 메뉴 자체에 대한 ul가 있습니다.

<nav>
  <div>
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

대박. 이제 nav 및 div 래퍼 요소에 몇 가지 스타일을 추가해 보겠습니다.

<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

이제 ul 및 해당 요소에 몇 가지 스타일을 추가해 보겠습니다.

<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

이제 로고를 SVG 요소로 추가해 보겠습니다.

<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex">
      <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>
        <span class="self-center text-lg font-semibold whitespace-nowrap">FlowBite</span>
    </a>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

navbar는 다음과 같아야 합니다.



잘 했어! 이제 문제는 모바일 장치에서도 작동하도록 만들어야 한다는 것입니다. 즉, 클릭하면 탐색 모음이 토글되는 햄버거 메뉴 아이콘을 표시해야 합니다.

휴대기기의 Tailwind CSS 탐색 모음

모바일 장치에서 작동하도록 만들면 다음과 같이 표시됩니다.



이 자습서의 다음 부분이 작동하도록 quickstart guide from Flowbite을 따르고 JavaScript를 포함하십시오.

NPM을 통해 설치하고 로컬에 포함하거나 CDN을 직접 포함할 수 있습니다.

NPM을 통해 필요

Node.js 및 Tailwind CSS이 설치되어 있는지 확인하십시오.

다음 명령을 실행하여 NPM을 사용하여 Flowbite를 종속 항목으로 설치합니다.

npm i flowbite

tailwind.config.js 파일 내 플러그인으로 Flowbite가 필요합니다.

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

대화형 요소가 작동하도록 기본 JavaScript 파일을 포함합니다.

<script src="../path/to/flowbite/dist/flowbite.js"></script>

Webpack 또는 다른 번들러를 사용하는 경우 다음과 같이 가져올 수도 있습니다.

import 'flowbite';

CDN을 통해 포함

FlowBite 작업을 시작하는 가장 빠른 방법은 CDN을 통해 CSS와 JavaScript를 프로젝트에 포함하는 것입니다.
head 태그 안에 다음과 같은 축소된 스타일시트가 필요합니다.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />

그리고 body 요소가 끝나기 전에 다음 자바스크립트 파일을 포함합니다.

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

프로젝트에 flowbite.js를 포함시킨 후 탐색 표시줄에 다음 햄버거 토글 버튼을 추가하기만 하면 토글이 작동합니다.

<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex">
      <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
        <span class="self-center text-lg font-semibold whitespace-nowrap">FlowBite</span>
    </a>
    <button data-collapse-toggle="mobile-menu" type="button" class="md:hidden ml-3 text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-2" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

휴대기기에서 다음과 같이 표시됩니다.



잘 했어! 완벽하게 반응하는 Tailwind CSS navbar 구성 요소를 구축했습니다. Tailwind CSS로 빌드된 더 많은 navbar 변형을 보려면 Flowbite에서 다음Tailwind CSS navbar components을 확인하세요.

Flowbite - Tailwind CSS 구성 요소 라이브러리

이responsive Tailwind CSS navbar는 Flowbite라는 대규모 오픈 소스 구성 요소 라이브러리의 예일 뿐입니다.



라이브러리에는 Tailwind CSS의 유틸리티 클래스로만 구축된 버튼, 경고, 탐색 모음, 드롭다운, 모달, 날짜 선택기 등의 구성 요소가 포함되어 있습니다.

Flowbite - Tailwind CSS components