Sistem tipografi khusus CSS Frutjam. Penskalaan teks HTMX semantik dengan Tailwind CSS v4, dapat diakses WCAG, tidak memerlukan JavaScript. Bekerja dengan Django, HTMX, Laravel, React, dan kerangka kerja apa pun.

Sistem tipografi khusus CSS Frutjam untuk Tailwind CSS v4. Judul semantik dan skala paragraf, utilitas tata letak responsif, dan integrasi prosa — tidak memerlukan JavaScript, WCAG AA dapat diakses. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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

Semua varian wrapper secara otomatis menskalakan padding horizontal di seluruh breakpoint — tidak diperlukan kelas utilitas tambahan.

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 tidak memaksa pengubahan ukuran "otomatis". Sebaliknya, ini memberi Anda kendali penuh menggunakan breakpoint yang mengutamakan seluler dari Tailwind. Hal ini memastikan desain Anda tidak pernah "menebak" seperti apa tampilan tata letak seluler Anda.

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)

Saat merender konten Markdown atau CMS, Anda tidak dapat menambahkan kelas seperti heading-lg secara manual ke setiap tag. prose-frutjam adalah pembungkus yang menjembatani plugin resmi @tailwindcss/typography dengan token desain Frutjam — jadi tag HTML tanpa gaya secara otomatis mewarisi warna dan tipografi tema Anda.

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

Tambahkan .prose-invert bersama .prose-frutjam untuk latar belakang gelap — token invert juga dipetakan ke warna 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>