Tailwind CSS 및 Flowbite로 검색창 구성요소를 구축하는 방법

유틸리티 우선 접근 방식과 Flowbite의 대화형 구성 요소 컬렉션이 많기 때문에 웹 사이트 페이지를 구축할 때 가장 좋아하는 프런트 엔드 스택 중 하나는 Tailwind CSS 및 Flowbite입니다.

Flowbite은 탐색 모음, 모달, 날짜 선택기, 버튼 등과 같은 대화형 요소를 포함하여 Tailwind CSS를 기반으로 구축된 가장 인기 있는 구성 요소 라이브러리입니다.

Tailwind CSS은 HTML을 벗어나지 않고도 웹 사이트를 훨씬 쉽게 개발할 수 있도록 도와주는 가장 인기 있는 유틸리티 우선 CSS 프레임워크입니다.

오늘 저는 블로그, 목록 디렉토리, 애플리케이션 등과 같은 웹 사이트에서 자주 볼 수 있는 검색 표시줄이라는 매우 일반적인 구성 요소를 구축하는 방법을 보여드리고자 합니다.

사용자가 나중에 데이터베이스 쿼리에 사용될 단어 또는 여러 단어를 기반으로 페이지 및 콘텐츠를 검색할 수 있도록 하는 데 사용할 수 있습니다.

최종적으로는 다음과 같이 표시됩니다.



더 이상 고민하지 않고 시작하겠습니다!

Tailwind CSS 검색창

우선 HTML 의미 체계가 올바른지 확인해야 하므로 시작을 위해 form 태그와 input 태그를 사용합니다.

<form>   
    <label for="voice-search" class="sr-only">Search</label>
    <input type="text" id="voice-search" required>
    <button type="submit">Search</button>
</form>

너무 많은 작업이 진행되지 않고 꽤 단순해 보이지만 곧 구성 요소의 스타일을 지정하고 몇 가지 요소를 더 추가할 것입니다.
label 태그도 추가했지만 숨기기도 했습니다. 이것은 스크린 리더가 입력이 무엇을 의미하는지 이해하는 데 도움이 됩니다.

이제 입력 구성 요소를 div로 래핑하고 일부 Tailwind CSS 클래스와 함께 내부에 아이콘을 추가하여 입력 시작 부분에 검색 아이콘을 표시해 보겠습니다.

<form class="flex items-center">   
    <label for="voice-search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
        </div>
        <input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Search Mockups, Logos, Design Templates..." required>
    </div>
    <button type="submit">Search</button>
</form>

훨씬 좋아 보인다! 이제 검색 버튼의 스타일을 지정하고 그 안에 아이콘을 추가해 보겠습니다.

<form class="flex items-center">   
    <label for="voice-search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
        </div>
        <input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Search Mockups, Logos, Design Templates..." required>
    </div>
    <button type="submit" class="inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search</button>
</form>

알아차리셨을 수도 있지만 음성 검색을 활성화하는 데 사용할 수 있는 음성 아이콘도 추가했습니다. 다음 코드를 추가합니다.

<form class="flex items-center">   
    <label for="voice-search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
        </div>
        <input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos, Design Templates..." required>
        <button type="button" class="flex absolute inset-y-0 right-0 items-center pr-3">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path></svg>
        </button>
    </div>
    <button type="submit" class="inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search</button>
</form>

어두운 변종 클래스도 추가했습니다. 어두운 모드에서 검색 표시줄은 다음과 같이 표시됩니다.



굉장해, 그게 다야! 이제 이 구성요소를 간단한 입력으로 React, Vue, Laravel과 같은 모든 프런트엔드 및 백엔드 기술과 함께 사용할 수 있습니다.

이Tailwind CSS search bar 구성 요소는 Flowbite 라이브러리에서 예제로 가져온 것이며 공식 문서에서 전체 검색 표시줄 변형 모음을 확인할 수 있습니다.











유용한 링크:

Tailwind CSS Search Bar - Flowbite

Flowbite - Tailwind CSS Components