Markdown 기반 글을 쉽게 스타일링하는 Tailwind Typography 사용법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Vue.js 및 Tailwind CSS를 사용하는 개발자, Markdown으로 동적으로 HTML을 생성하는 프로젝트 담당자
핵심 요약
- Tailwind Typography 플러그인을 사용하면
prose클래스로 자동으로 타이포그래피 스타일 적용 가능 - Tailwind 3과 Tailwind 4 버전별로 설치 및 설정 방법 다름
@tailwindcss/typography설치 후prose클래스를article태그에 추가하여 스타일링
섹션별 세부 요약
1. 문제 상황
- Tailwind CSS 기본 설정은 HTML 태그의 디폴트 스타일을 초기화
- Markdown에서 생성된
article태그에 수동으로 Tailwind 클래스 적용 불가능
2. 해결 방안
- Tailwind Typography 플러그인 사용 시
prose클래스로 자동 스타일 적용 - 예시:
...
3. 설치 및 설정
- Tailwind 4 사용자:
@import "tailwindcss";후@plugin "@tailwindcss/typography";추가 - Tailwind 3 사용자:
tailwind.config.js의plugins배열에@tailwindcss/typography포함 - 설치 명령:
npm install -D @tailwindcss/typography
4. 고급 사용법
- 공식 문서 참조: https://github.com/tailwindlabs/tailwindcss-typography
prose클래스에 추가 옵션 적용 가능 (예:prose-sm,prose-lg)
결론
- Tailwind Typography를 사용하면 동적 Markdown 콘텐츠의 타이포그래피를 효과적으로 관리 가능
- Tailwind 버전에 따라 설정 방법을 확인하고
prose클래스 적용을 통해 시간과 노력을 절약하세요.