Tailwind CSS 및 Flowbite를 사용하여 검색 입력 구성 요소를 구축하는 방법
Flowbite은 탐색 표시줄, 모달, 검색 표시줄 등을 포함하여 Tailwind CSS 유틸리티 클래스 위에 구축된 가장 인기 있는 구성 요소 라이브러리 중 하나입니다.
Tailwind CSS은 클래스의 유틸리티 우선 방법론을 기반으로 하는 가장 빠르게 성장하는 CSS 프레임워크 중 하나입니다.
오늘 저는 Tailwind CSS의 유틸리티 클래스와 Flowbite의 구성 요소를 사용하여 검색 입력 구성 요소를 만드는 방법을 보여드리고자 합니다.
시작하자!
Tailwind CSS 검색 입력 - Flowbite
가장 먼저 해야 할 일은
form
, label
, input
및 제출 버튼을 포함할 구성 요소에 대한 HTML 마크업을 설정하는 것입니다.예를 들면 다음과 같습니다.
<form>
<label for="default-search">Search</label>
<input type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
<button type="submit">Search</button>
</form>
아직 스타일을 적용하지 않았기 때문에 그다지 좋아 보이지는 않지만 일부 Tailwind CSS 클래스를 추가하기 시작하여 즉시 개선할 것입니다.
label
및 input
요소의 스타일을 지정하여 시작하겠습니다.<form>
<label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
<input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
<button type="submit">Search</button>
</form>
우리는 거기에 도달하고 있지만 여전히 충분하지 않습니다.
button
요소의 스타일도 지정해 보겠습니다.<form>
<label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
<input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
<button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</form>
추가
div
래퍼와 루프가 있는 SVG 아이콘을 추가하여 검색 표시줄임을 표시해 보겠습니다.<form>
<label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
<div class="relative">
<input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
<button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</div>
</form>
마지막으로 다크 모드 클래스도 추가해 보겠습니다.
<form>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
<div class="relative">
<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="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>
</div>
<input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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..." required>
<button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
</div>
</form>
최종 결과는 다음과 같아야 합니다.
공식 Flowbite 문서에서 더 많은Tailwind CSS Search Input 예제를 확인할 수 있습니다.
다음은 몇 가지 예입니다.
Reference
이 문제에 관하여(Tailwind CSS 및 Flowbite를 사용하여 검색 입력 구성 요소를 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/themesberg/how-to-build-a-search-input-component-with-tailwind-css-and-flowbite-12b1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)