Typography

Frutjam's CSS-only typography system. Semantic HTML text scaling with Tailwind CSS v4, WCAG accessible, no JavaScript required. Works with Django, HTMX, Laravel, React, and any framework.

Frutjam 針對 Tailwind CSS v4 的純 CSS 版式系統。語義標題和段落比例、響應式佈局實用程式和散文整合 — 無需 JavaScript，可存取 WCAG AA。適用於 Django、HTMX、Laravel、React 和任何堆疊。

佈局

.wrapper 是一個響應式頁面佈局實用程序，它將內容水平居中並在斷點之間應用一致的水平填充。使用大小變體為不同的佈局需求設定最大寬度約束。

所有課程

所有變體共享相同的響應式填充比例。僅最大寬度不同。

班級	最大寬度	使用案例
`wrapper`	none	全寬居中容器
`wrapper-xs`	320px	狹窄的對話框或側邊欄
`wrapper-sm`	640px	單列內容
`wrapper-md`	768px	文章和部落格文章
`wrapper-lg`	1024px	標準頁面佈局
`wrapper-xl`	1280px	寬佈局
`wrapper-2xl`	1536px	超寬佈局
`wrapper-full`	100%	全出血且內邊距一致

響應式填充

所有包裝器變體都會自動縮放跨斷點的水平填充 - 不需要額外的實用程式類別。

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

頁面佈局範例

在主要內容區域使用 .wrapper-xl 以獲得標準頁面佈局。

<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 進行可讀的文章或部落格文章版面。

<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-md、heading-2、heading-3 heading-5xl、heading-6xl、heading-7xl、heading-8xl、heading-9xl









  
  
  
    
      
        
        
          
Gigantic Hero
Section Title
Small Subheading

        
        
      
    
  
  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          坍塌
          擴張
        
        
        
        
          
        
      
    
  
  

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


      
      
    
    
    
      檢視程式碼
    
    
  
  





動態精度（任意數字）
Frutjam 讓您擺脫規模。使用任何數值來設定特定的像素大小
.heading-{number}（例如.heading-46）







  
  
  
    
      
        
        
          
    Bespoke Heading

        
        
      
    
  
  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          坍塌
          擴張
        
        
        
        
          
        
      
    
  
  

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


      
      
    
    
    
      檢視程式碼
    
    
  
  






段落
使用 .para-{size} 作為正文、描述和 UI 標籤
標準量表
para-xs、para-sm、para-md、para-base、para-lg、para-xl、para-2xl、para-3、xl、para-2xl、para代碼> para-6xl、para-7xl、para-8xl、para-9xl








  
  
  
    
      
        
        
          
This is a lead paragraph with extra breathing room.
This is your standard UI text size.
Small footer or caption text.

        
        
      
    
  
  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          坍塌
          擴張
        
        
        
        
          
        
      
    
  
  

  
  
    
    
      
      
      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）







  
  
  
    
      
        
        
          
    Editorial-style body text.

        
        
      
    
  
  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          坍塌
          擴張
        
        
        
        
          
        
      
    
  
  

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


      
      
    
    
    
      檢視程式碼
    
    
  
  






響應式排版
Frutjam does not force "automatic" resizing. Instead, it gives you full control using Tailwind's mobile-first breakpoints. This ensures your design never "guesses" what your mobile layout should look like.
響應式模式
始終先定義您的行動裝置尺寸（基底類別），然後使用 md: 或 lg: 等前綴來放大以適應更大的螢幕。








  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          
        
      
    
  
  

  
  
    
    
      
      
      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 中都處於活動狀態：







  
  

  
  

  
  
    
      
      
        css
      
      
      
        
        
          
        
      
    
  
  

  
  
    
    
      
      
      1
2
3 @import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";


      
      
    
    
  
  






用法
將 .prose 和 .prose-frutjam 加入包裝元素中。 .prose 啟動版式外掛程式； .prose-frutjam 將 Frutjam 的主題標記對應到它上面。







  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          
        
      
    
  
  

  
  
    
    
      
      
      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 變數：







  
  

  
  

  
  
    
      
      
        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-invert 與 .prose-frutjam 一起用於深色背景 - 反轉標記也對應到 Frutjam 顏色。







  
  

  
  

  
  
    
      
      
        html
      
      
      
        
        
          
        
      
    
  
  

  
  
    
    
      
      
      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>


      
      
    
    
  
  






                
                
                
                    
                        有關的
                        
                            
                            Themes
                            
                            Colors
                            
                        
                    
                
                
                
                
                    
                        Configuration
                        Accordion