Frutjam의 CSS 전용 타이포그래피 시스템. Tailwind CSS v4, WCAG 액세스 가능, JavaScript가 필요하지 않은 의미론적 HTML 텍스트 크기 조정. Django, HTMX, Laravel, React 및 모든 프레임워크에서 작동합니다.

Tailwind CSS v4를 위한 Frutjam의 CSS 전용 타이포그래피 시스템입니다. 의미 체계 제목 및 단락 크기, 반응형 레이아웃 유틸리티 및 산문 통합 — JavaScript가 필요하지 않으며 WCAG AA에 액세스할 수 있습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

공들여 나열한 것

.wrapper는 콘텐츠를 수평으로 중앙에 배치하고 중단점 전체에 일관된 수평 패딩을 적용하는 반응형 페이지 레이아웃 유틸리티입니다. 크기 변형을 사용하여 다양한 레이아웃 요구에 맞게 최대 너비 제약 조건을 설정하세요.

모든 수업

모든 변형은 동일한 반응형 패딩 배율을 공유합니다. 최대 너비만 다릅니다.

반응형 패딩

모든 래퍼 변형은 중단점 전체에서 수평 패딩을 자동으로 확장하므로 추가 유틸리티 클래스가 필요하지 않습니다.

1
2
3
4

/* Applied to every wrapper variant */
default  → padding-inline: 1rem   (16px)
sm       → padding-inline: 2rem   (32px)
lg       → padding-inline: 4rem   (64px)

페이지 레이아웃 예

표준 페이지 레이아웃을 위해서는 기본 콘텐츠 영역에서 .wrapper-xl을 사용하세요.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<header class="bg-base-200">
  <div class="wrapper-xl">
    <nav class="navbar">...</nav>
  </div>
</header>

<main class="wrapper-xl py-12">
  <h1 class="heading-4xl">Page Title</h1>
  <p class="para-base">Page content goes here.</p>
</main>

<footer class="bg-base-200">
  <div class="wrapper-xl">...</div>
</footer>

기사 레이아웃 예

읽을 수 있는 기사나 블로그 게시물 레이아웃에는 .wrapper-md를 사용하세요.

1
2
3
4

<article class="wrapper-md py-10 prose prose-frutjam">
  <h1>Article Title</h1>
  <p>Long-form content benefits from a narrower max-width for optimal line length.</p>
</article>

타이포그래피

1. 요소 유틸리티

이러한 클래스는 HTML 요소에 직접 사용하도록 설계되었습니다. 제목은 무게와 영향력에 최적화되어 있고 단락은 가독성에 최적화되어 있습니다.

제목

제목과 중요도가 높은 텍스트에는 .heading-{size}를 사용하세요.

표준 규모

heading-xs, heading-sm, heading-md, heading-base, heading-lg, heading-xl, heading-2xl, heading-3xl, heading-4xl, heading-5xl, 제목-6xl, 제목-7xl, 제목-8xl, 제목-9xl

1
2
3

<h1 class="heading-4xl">Gigantic Hero</h1>
<h2 class="heading-3xl">Section Title</h2>
<h3 class="heading-base">Small Subheading</h3>

동적 정밀도(모든 숫자)

Frutja를 사용하면 체중계에서 벗어날 수 있습니다. 숫자 값을 사용하여 특정 픽셀 크기 설정

.heading-{number}(예: .heading-46)

    <h2 class="heading-46">Bespoke Heading</h2>

단락

본문 텍스트, 설명, UI 라벨에는 .para-{size}를 사용하세요.

표준 규모

para-xs, para-sm, para-md, para-base, para-lg, para-xl, para-2xl, para-3xl, para-4xl, para-5xl, para-6xl, para-7xl, para-8xl, para-9xl

1
2
3

<p class="para-lg">This is a lead paragraph with extra breathing room.</p>
<p class="para-base">This is your standard UI text size.</p>
<p class="para-xs">Small footer or caption text.</p>

동적 정밀도(모든 숫자)

체중계에 갇히지 마세요. 숫자 값을 사용하여 디자인에 필요한 정확한 픽셀 크기를 조정하세요.

.para-{number}(예: .para-28)

    <p class="para-28">Editorial-style body text.</p>

반응형 타이포그래피

Frutjam은 "자동" 크기 조정을 강제하지 않습니다. 대신 Tailwind의 모바일 우선 중단점을 사용하여 완전한 제어 기능을 제공합니다. 이렇게 하면 디자인이 모바일 레이아웃이 어떻게 생겼는지 "추측"하지 못하게 됩니다.

반응형 패턴

항상 모바일 크기(기본 클래스)를 먼저 정의한 다음 md: 또는 lg:와 같은 접두사를 사용하여 더 큰 화면에 맞게 확장하세요.

1
2
3
4
5
6
7

<h1 class="heading-2xl md:heading-5xl lg:heading-9xl">
  Responsive Headline
</h1>

<p class="para-sm md:para-base lg:para-lg">
  Body text that stays comfortable on all devices.
</p>

2. 리치 텍스트(산문)

Markdown 또는 CMS 콘텐츠를 렌더링할 때 heading-lg와 같은 클래스를 모든 태그에 수동으로 추가할 수는 없습니다. prose-frutjam은 공식 @tailwindcss/typography 플러그인을 Frutjam의 디자인 토큰과 연결하는 래퍼입니다. 따라서 스타일이 지정되지 않은 HTML 태그는 테마의 색상과 타이포그래피를 자동으로 상속합니다.

설정

Tailwind v4 CSS에서 두 플러그인이 모두 활성화되어 있는지 확인하세요.

1
2
3

@import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";

용법

래퍼 요소에 .prose 및 .prose-frutjam을 모두 추가합니다. .prose는 타이포그래피 플러그인을 활성화합니다. .prose-frutjam은 Frutjam의 테마 토큰을 여기에 매핑합니다.

1
2
3
4
5
6
7
8
9

<article class="prose prose-frutjam max-w-none">
  <h1>Article Title</h1>
  <p>Body text, links, and lists all inherit Frutjam theme colors automatically.</p>
  <ul>
    <li>Links use your primary color</li>
    <li>Blockquote borders use your primary color</li>
    <li>Headings, body, and captions use semantic on-base colors</li>
  </ul>
</article>

매핑되는 내용

래퍼는 Frutjam 토큰을 사용하여 다음 산문 CSS 변수를 재정의합니다.

1
2
3
4
5
6
7
8

/* prose-frutjam maps these automatically */
body text      → --color-body
headings       → --color-on-base
links          → --color-primary
blockquotes    → --color-on-base  (text), --color-primary (border)
bullets        → --color-neutral
code           → --color-on-base
captions       → --color-on-neutral

다크 모드

어두운 배경의 경우 .prose-frutjam과 함께 .prose-invert를 추가하세요. 반전 토큰도 Frutjam 색상에 매핑됩니다.

1
2
3
4

<article class="prose prose-frutjam prose-invert bg-neutral p-6 rounded-lg">
  <h2>Dark Background Content</h2>
  <p>Inverted tokens keep text legible on dark surfaces.</p>
</article>