콘텐츠로 건너뛰기
1.6k

타이포그래피

제목, 본문, 목록, 표, 인라인 코드 등을 위한 범용 스타일 레시피 — 네오브루탈리즘 스타일의 강렬한 디자인으로 조판되었습니다.

Neobrutalism는 기본적으로 타이포그래피 스타일을 전혀 제공하지 않습니다. 이 페이지는 유틸리티 클래스를 사용하여 텍스트에 스타일을 적용하는 방법의 예시입니다.

설치할 typography 컴포넌트는 없습니다. 기본으로 제공되는 것도 없습니다. 아래 각 섹션은 일반 HTML 요소(h1–h4, p, blockquote, table, 목록, 인라인 코드)용 복사-붙여넣기 유틸리티 클래스 레시피이며, 테마 토큰에 기대어 제목은 무겁고 테두리는 두껍게 나옵니다.

다음과 같은 경우에 사용합니다.

  • 블로그 글과 문서 — MDX나 CMS 출력을 이 클래스에 매핑해 긴 글 스타일을 맞춥니다.
  • 마케팅 페이지 — 별도 디스플레이 타입 시스템 없이 h1, Lead, Large로 히어로 카피를 처리합니다.
  • @tailwindcss/typography가 과한 경우 — prose 플러그인 대신 필요한 요소만 복사합니다.

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">

table

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

인라인 코드

@radix-ui/react-alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

리드문

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-xl text-muted-foreground">

큰 텍스트

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}

작은 텍스트

Email address
export function TypographySmall() {
  return (
    <small className="text-sm leading-none font-medium">Email address</small>

흐린 텍스트

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-sm text-muted-foreground">Enter your email address.</p>

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성

이 레시피는 네이티브 요소에 스타일을 입히므로 시맨틱은 이미 올바릅니다. 그 상태를 유지하세요. 제목 레벨은 크기가 아니라 문서 개요로 고르세요. 스크린 리더는 레벨로 탐색하므로 h2가 너무 커 보이면 h4로 바꾸지 말고 스타일을 조정하세요. 데이터 테이블에는 <th> 헤더 행을 두어 셀이 열과 연결되게 하고, blockquote는 실제 인용에만 쓰세요.