Tailwind CSS 및 Flowbite를 사용하여 텍스트 영역 구성 요소를 빌드하는 방법

textarea 요소는 하나 이상의 가로 행을 기반으로 사용자로부터 더 많은 양의 텍스트를 받을 수 있기 때문에 양식 구성 요소의 중요한 부분입니다.

오늘 저는 Flowbite textarea components 에서 영감을 받아 Tailwind CSS의 유틸리티 클래스를 사용하여 간단하지만 고급 텍스트 영역 구성 요소를 빌드하는 방법을 보여드리고자 합니다.

튜토리얼을 시작하기 전에 두 가지 기술에 대한 세부 정보를 작성하겠습니다.

Flowbite은 탐색 모음, 모달, 드롭다운, 날짜 선택기 등과 같은 구성 요소 간의 상호 작용을 허용하는 JS 파일도 포함된 Tailwind CSS의 유틸리티 클래스로 구축된 가장 인기 있는 구성 요소 라이브러리입니다.

Tailwind CSS은 가장 널리 사용되는 유틸리티 우선 CSS 프레임워크이며 HTML 요소와 함께 클래스 및 CSS를 사용하는 방식을 변경합니다. 모든 유틸리티 클래스를 HTML에 직접 추가하므로 더 이상 추가 CSS를 작성할 필요가 없습니다.

오늘 우리가 만들 두 개의 텍스트 영역은 다음과 같습니다.





시작하자!

Tailwind CSS 텍스트 영역

먼저 HTML 의미 체계를 설정해야 합니다.

<label for="message">Your message</label>
<textarea id="message" rows="4" placeholder="Your message..."></textarea>

충분히 쉽죠? 이제 더 예쁘게 만들기 위해 몇 가지 추가 스타일을 추가해 보겠습니다.

<label for="message" class="block mb-2 text-sm font-medium text-gray-900">Your message</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Your message..."></textarea>

더 좋아보이죠? 이제 다크 모드가 활성화되었을 때 더 잘 보이도록 몇 가지 다크 모드 클래스를 추가해 보겠습니다.

<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
<textarea id="message" rows="4" class="block p-2.5 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="Your message..."></textarea>

최종 결과는 다음과 같아야 합니다(어두운 모드에서).



좋습니다. 이제 추가 옵션이 있는 고급 텍스트 영역 구성 요소를 만들려고 합니다.

Tailwind CSS 설명 상자

먼저 HTML 의미 체계를 설정해 보겠습니다.

<form>
   <div class="mb-4 w-full bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
       <div class="py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800">
           <label for="comment" class="sr-only">Your comment</label>
           <textarea id="comment" rows="4" class="px-0 w-full text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400" placeholder="Write a comment..." required></textarea>
       </div>
       <div class="flex justify-between items-center py-2 px-3 border-t dark:border-gray-600">
           <button type="submit" class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
               Post comment
           </button>
           <div class="flex pl-0 space-x-1 sm:pl-2">
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
               </button>
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
               </button>
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
               </button>
           </div>
       </div>
   </div>
</form>
<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>

이 예제에서는 form 요소 내부에 텍스트 영역을 추가했지만 제출 버튼, 도우미 텍스트 및 오른쪽 하단에 일부 작업 버튼도 추가했습니다.

블로그 댓글 섹션 및 기타 시나리오에서 쉽게 사용할 수 있습니다.

이Tailwind CSS textarea 구성 요소는 Flowbite 구성 요소 라이브러리에서 영감을 얻었으며 다크 모드 지원이 활성화된 웹 사이트에서 모든 텍스트 영역 예제를 확인할 수 있습니다.

유용한 링크

Tailwind CSS Textarea - Flowbite

Flowbite - Tailwind CSS Components