Hệ thống kiểu chữ chỉ CSS của Frutjam. Chia tỷ lệ văn bản HTML ngữ nghĩa bằng Tailwind CSS v4, có thể truy cập WCAG, không cần JavaScript. Hoạt động với Django, HTMX, Laravel, React và bất kỳ framework nào.

Hệ thống kiểu chữ chỉ CSS của Frutjam dành cho Tailwind CSS v4. Tỷ lệ đoạn văn và tiêu đề ngữ nghĩa, tiện ích bố cục đáp ứng và tích hợp văn xuôi — không cần JavaScript, có thể truy cập WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Layout

.wrapper is a responsive page layout utility that centers content horizontally and applies consistent horizontal padding across breakpoints. Use size variants to set a max-width constraint for different layout needs.

All Classes

All variants share the same responsive padding scale. Only the max-width differs.

Responsive Padding

Tất cả các biến thể của trình bao bọc đều tự động chia tỷ lệ khoảng đệm ngang trên các điểm dừng — không cần thêm lớp tiện ích nào.

1
2
3
4

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

Page Layout Example

Use .wrapper-xl on your main content area for a standard page layout.

 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>

Article Layout Example

Use .wrapper-md for readable article or blog post layouts.

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>

Typography

1. Element Utilities

These classes are designed for direct use on HTML elements. Headings are optimized for weight and impact, while Paragraphs are optimized for readability.

Headings

Use .heading-{size} for titles and high-importance text.

The Standard Scale

heading-xs, heading-sm, heading-md, heading-base, heading-lg, heading-xl, heading-2xl, heading-3xl, heading-4xl, heading-5xl, heading-6xl, heading-7xl, heading-8xl, heading-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>

Dynamic Precision (Any Number)

Frutjam allows you to break away from the scale. Use any numeric value to set a specific pixel size

.heading-{number} (e.g., .heading-46)

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

Paragraphs

Use .para-{size} for body text, descriptions, and UI labels

The Standard Scale

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>

Dynamic Precision (Any Number)

Don't get stuck in a scale. Use any numeric value to dial in the exact pixel size your design demands.

.para-{number} (e.g., .para-28)

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

Responsive Typography

Frutjam không buộc thay đổi kích thước "tự động". Thay vào đó, nó mang lại cho bạn toàn quyền kiểm soát bằng cách sử dụng các điểm dừng đầu tiên trên thiết bị di động của Tailwind. Điều này đảm bảo thiết kế của bạn không bao giờ "đoán" bố cục trên thiết bị di động của bạn sẽ trông như thế nào.

The Responsive Pattern

Always define your mobile size first (the base class), then use prefixes like md: or lg: to scale up for larger screens.

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. Rich Text (Prose)

Khi hiển thị nội dung Markdown hoặc CMS, bạn không thể thêm các lớp như heading-lg vào mỗi thẻ theo cách thủ công. prose-frutjam là trình bao bọc kết nối plugin @tailwindcss/typography chính thức với mã thông báo thiết kế của Frutjam — vì vậy, các thẻ HTML chưa được tạo kiểu sẽ tự động kế thừa màu sắc và kiểu chữ của chủ đề của bạn.

Setup

Ensure both plugins are active in your Tailwind v4 CSS:

1
2
3

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

Usage

Add both .prose and .prose-frutjam to the wrapper element. .prose activates the typography plugin; .prose-frutjam maps Frutjam's theme tokens onto it.

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>

What Gets Mapped

The wrapper overrides the following prose CSS variables with Frutjam tokens:

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

Dark Mode

Thêm .prose-invert cùng với .prose-frutjam cho nền tối — mã thông báo đảo ngược cũng được ánh xạ tới màu 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>