Tailwind CSS 및 Flowbite로 블로그 템플릿을 구축하는 방법

Tailwind CSS는 CSS 파일에 액세스할 필요 없이 템플릿에서 직접 요소의 스타일을 지정하는 것이 얼마나 쉬운지 때문에 페이지를 빠르게 빌드하고 싶을 때 가장 좋아하는 프레임워크 중 하나입니다.

Tailwind CSS 워크플로를 보완하는 데 사용하고 싶은 또 다른 기능은 Flowbite과 같은 구성 요소 라이브러리입니다. 이 라이브러리는 도구 설명, 드롭다운, 탐색 모음, 모달 등과 같은 상호 작용을 포함하여 사전 구축된 구성 요소에 도움이 됩니다.

Tailwind CSS 영역에서 많이 다루지 않은 것 중 하나는 블로그 관련 구성 요소 및 페이지이므로 오늘 Tailwind CSS 및 Flowbite를 사용하여 간단한 블로그 템플릿/기사 레이아웃을 빌드하는 방법을 보여 드리고자 합니다.

다음은 페이지가 어떻게 표시되는지 미리 보기입니다.



시작하자!

요구 사항

먼저 로컬 프로젝트에 Tailwind CSS와 Flowbite가 모두 설치되어 있는지 확인하세요. CDN 구성을 통해 이 작업을 수행하거나 NPM을 통해 설치할 수 있습니다.

Install Tailwind CSS

Install Flowbite

이제 둘 다 설치했으므로 페이지 작성을 시작할 수 있습니다.

블로그 템플릿 만들기

가장 먼저 생각해야 할 것은 기사가 내용 측면에서 무엇을 필요로 하는가입니다. 이 예에서는 다음 사항을 보여줍니다.

저자

작가 프로필 사진

작성자 설명

게시일

포스트 콘텐츠

코멘트

관련 기사

뉴스레터 CTA

바닥글

Flowbite Blocks 컬렉션에서 blog templates coded in Tailwind CSS 중 하나를 선택하여 처음부터 모든 작업을 수행할 필요가 없습니다.



"코드 표시"버튼을 클릭하고 HTML 마크업을 복사하여 붙여넣고 프로젝트에 추가할 수 있습니다.

그렇게 하더라도 기사 콘텐츠의 스타일이 올바르게 지정되도록 플러그인을 설치해야 합니다.

그렇게 하려면 Flowbite Typography 플러그인을 설치해야 합니다.

npm i -D flowbite-typography

그런 다음 tailwind.config.js 파일에 추가합니다.

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}

이제 모두 작동합니다!

다크 모드

위 예제의 클래스에도 어두운 모드 지원이 포함되어 있으므로 Tailwind CSS로 어두운 모드를 활성화할 수도 있습니다.

다크 모드 전환기를 구축하는 방법을 알아보려면 여기Tailwind CSS dark mode tutorial를 확인하십시오.

문서가 어두운 모드에서 어떻게 표시되는지는 다음과 같습니다.

블로그 템플릿 예

Flowbite Blocks의 "게시자 UI"범주에서 확인할 수 있는 블로그 템플릿, 댓글 섹션, 관련 기사 및 블로그 섹션의 전체 모음이 있습니다.

배경 이미지가 있는 기사

추천 배경 이미지, 작성자, 게시물 범주, 댓글 섹션 및 위젯이 포함된 오른쪽 사이드바가 있는 이 기사 레이아웃을 시작하세요.



View preview and code example .

커뮤니티 블로그 게시물

이 블로그 템플릿을 사용하여 게시물 반응, 댓글 섹션, 작성자 세부 정보, 게시물 날짜, 게시물 범주 등이 포함된 기사를 표시합니다.



View preview and code example .

헤더가 있는 주요 기사

이 블로그 게시물 레이아웃을 사용하여 리드 단락, 소셜 미디어 공유 아이콘 및 댓글 섹션이 있는 주요 제목을 표시합니다.



View preview and code example .

라이브 블로깅

CNN과 같은 대형 뉴스 매체와 유사한 라이브 이벤트를 보고하기 위해 새 콘텐츠 항목을 게시하여 라이브 블로깅에 이 예를 사용하십시오.



View preview and code example .

오른쪽 사이드바 기사

이 예는 워드프레스처럼 주요 콘텐츠가 왼쪽에 있고 오른쪽에 위젯이 있는 사이드바가 있는 표준 기사 레이아웃으로 사용할 수 있습니다.



View preview and code example .

Tailwind CSS Blog Templates

Tailwind CSS Comments Sections

Tailwind CSS Blog Sections

Tailwind CSS Related Articles

학점

이 튜토리얼은 두 가지 멋진 오픈 소스 프로젝트 덕분에 만들 수 있었습니다.

Tailwind CSS

Flowbite