Tailwind CSS에서 blockquote 구성 요소를 빌드하는 방법

몇 달 전에 저는 Tailwind CSS에서 navbars, 모달, 버튼, 캐러셀 슬라이더 등과 같이 일반적으로 사용되는 UI 구성 요소를 빌드하는 방법을 보여주는 일련의 기사를 시작했습니다.

오늘은 기사, 사용자 평가, 리뷰 등에서 타사 소스를 인용하는 데 자주 사용되는 blockquote component을 빌드하는 방법을 보여 드리고자 합니다.

이 구성 요소를 구축하는 데 사용할 기술에 대해 조금 말씀드리겠습니다.

Tailwind CSS은 CSS 파일을 건드리지 않고 HTML에서 직접 스타일을 작성하는 데 사용할 수 있는 가장 인기 있는 유틸리티 우선 CSS 프레임워크입니다.

Flowbite은 탐색 모음, 모달, 버튼, 드롭다운 등을 제공하는 Tailwind CSS 위에 구축된 가장 인기 있는 오픈 소스 구성 요소 라이브러리입니다.

다음은 우리가 구축할 blockquote 구성 요소의 미리 보기입니다.



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

Tailwind CSS 인용구

시작하기 전에 Tailwind CSS가 프로젝트에 설치되어 있어야 합니다. 그들의 quickstart guide을 확인할 수 있습니다.

또한 Flowbite 라이브러리의 다른 고급 구성 요소를 사용하기 위해 quickstart guide을 사용하여 NPM을 통해 설치할 수도 있습니다.

두 프로젝트를 모두 설치한 후 먼저 blockquote의 HTML을 설정해 보겠습니다.

<blockquote>
    <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>

엄청난! 이제 단락에 몇 가지 스타일을 추가해 보겠습니다.

<blockquote>
    <p class="text-xl italic font-medium leading-relaxed text-gray-900">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>

더 좋아 보인다. 이제 blockquote 요소 자체에 일부 배경과 스타일을 추가해 보겠습니다.

<blockquote class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300">
    <p class="text-xl italic font-medium leading-relaxed text-gray-900">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>

대박! 이제 blockquote는 미리보기에서와 같이 보일 것입니다.

이제 몇 가지 어두운 모드 클래스를 추가해 보겠습니다.

<blockquote class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800">
    <p class="text-xl italic font-medium leading-relaxed text-gray-900 dark:text-white">"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>

결과는 다음과 같아야 합니다(다크 모드 활성화).



dark mode switcher with Tailwind CSS 를 활성화하는 방법을 알아봅니다.

Flowbite 설명서를 검색하여 Tailwind CSS blockquote의 더 많은 예를 확인할 수 있습니다.

아이콘이 있는 인용구

다음은 blockquote with icon의 예입니다.



다음은 blockquote with a paragraph의 예입니다.



blockquote as a user review의 또 다른 예:

학점

이 튜토리얼은 Tailwind CSS 및 Flowbite와 같은 멋진 오픈 소스 프로젝트 없이는 불가능합니다.

Tailwind CSS

Flowbite