El sistema de tipografía solo CSS de Frutjam. Escalado de texto HTML semántico con Tailwind CSS v4, accesible WCAG, no se requiere JavaScript. Funciona con Django, HTMX, Laravel, React y cualquier framework.

El sistema de tipografía solo CSS de Frutjam para Tailwind CSS v4. Escala semántica de encabezados y párrafos, utilidades de diseño responsivo e integración de prosa: no se requiere JavaScript, se puede acceder a WCAG AA. Funciona con Django, HTMX, Laravel, React y cualquier pila.

Disposición

.wrapper es una utilidad de diseño de página responsiva que centra el contenido horizontalmente y aplica un relleno horizontal consistente en los puntos de interrupción. Utilice variantes de tamaño para establecer una restricción de ancho máximo para diferentes necesidades de diseño.

Todas las clases

Todas las variantes comparten la misma escala de relleno de respuesta. Sólo difiere el ancho máximo.

Relleno responsivo

Todas las variantes de contenedor escalan automáticamente el relleno horizontal a través de los puntos de interrupción, sin necesidad de clases de utilidad adicionales.

1
2
3
4

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

Ejemplo de diseño de página

Utilice .wrapper-xl en su área de contenido principal para un diseño de página estándar.

 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>

Ejemplo de diseño de artículo

Utilice .wrapper-md para diseños legibles de artículos o publicaciones de blog.

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>

Tipografía

1. Utilidades de elementos

Estas clases están diseñadas para uso directo en elementos HTML. Los títulos están optimizados para el peso y el impacto, mientras que los párrafos están optimizados para la legibilidad.

Encabezamientos

Utilice .heading-{size} para títulos y texto de gran importancia.

La escala estándar

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

Precisión dinámica (cualquier número)

Frutjam te permite romper con la balanza. Utilice cualquier valor numérico para establecer un tamaño de píxel específico

.heading-{number} (por ejemplo, .heading-46)

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

Párrafos

Utilice .para-{size} para el texto del cuerpo, las descripciones y las etiquetas de la interfaz de usuario.

La escala estándar

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>

Precisión dinámica (cualquier número)

No te quedes atrapado en una báscula. Utilice cualquier valor numérico para marcar el tamaño de píxel exacto que exige su diseño.

.para-{number} (por ejemplo, .para-28)

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

Tipografía responsiva

Frutjam no fuerza el cambio de tamaño "automático". En cambio, le brinda control total utilizando los puntos de interrupción móviles primero de Tailwind. Esto garantiza que su diseño nunca "adivine" cómo debería verse su diseño móvil.

El patrón responsivo

Defina siempre primero el tamaño de su dispositivo móvil (la clase base), luego use prefijos como md: o lg: para ampliarlo a pantallas más grandes.

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. Texto enriquecido (prosa)

Al representar contenido de Markdown o CMS, no puede agregar manualmente clases como heading-lg a cada etiqueta. prose-frutjam es un contenedor que une el complemento oficial @tailwindcss/typography con los tokens de diseño de Frutjam, de modo que las etiquetas HTML sin estilo hereden automáticamente los colores y la tipografía de su tema.

Configuración

Asegúrese de que ambos complementos estén activos en su CSS Tailwind v4:

1
2
3

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

Uso

Agregue .prose y .prose-frutjam al elemento contenedor. .prose activa el complemento de tipografía; .prose-frutjam asigna los tokens temáticos de Frutjam a él.

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>

Lo que se mapea

El contenedor anula las siguientes variables CSS en prosa con tokens Frutjam:

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

Modo oscuro

Agregue .prose-invert junto a .prose-frutjam para fondos oscuros; los tokens invertidos también se asignan a los colores de 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>