Implementation:Langgenius Dify Typography

Knowledge Sources	Langgenius_Dify
Domains	Frontend, DesignSystem, CSS
Last Updated	2026-02-12 07:00 GMT

Overview

Custom Tailwind CSS typography plugin configuration that defines prose styles for rich text rendering, including both light and dark (invert) mode support.

Description

web/typography.js exports a function that receives the Tailwind theme helper and returns a typography configuration object with two variants: DEFAULT and invert.

The DEFAULT variant defines comprehensive CSS custom properties and element styles:

• CSS custom properties: Sets --tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-bold, --tw-prose-counters, --tw-prose-bullets, --tw-prose-hr, --tw-prose-quotes, --tw-prose-captions, --tw-prose-code, --tw-prose-code-bg, --tw-prose-code-ring, and table border colors. Uses zinc and emerald color palettes from the theme.
• Invert properties: Parallel set of --tw-prose-invert-* variables for dark mode, using lighter zinc tones and white.
• Base typography: Body text uses fontSize.sm and lineHeight.7.
• Layout: Content is centered with max-width constraints (maxWidth.2xl, expanding to maxWidth.3xl on large screens).
• Element styles: Comprehensive rules for paragraphs, ordered/unordered lists (with Roman, alpha, decimal markers), horizontal rules (full-bleed with responsive margins), blockquotes (left-bordered with open/close quotes), headings (h1 at 2xl bold, h2 at lg semibold, h3 at base semibold), images/video/figures, tables (full width with header/body/footer styling), links (with hover transitions using emerald), strong text, and inline code (with rounded background and ring).
• Override rules: Removes margins after headings and on first/last children.

The invert variant remaps all --tw-prose-* properties to their --tw-prose-invert-* counterparts for dark mode.

Usage

This file is imported by tailwind-common-config.ts and set as the theme.typography configuration, enabling the prose utility class across the Dify frontend.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/typography.js
• Lines: 1-357

Signature

export default ({ theme }) => ({
  DEFAULT: {
    css: {
      '--tw-prose-body': theme('colors.zinc.700'),
      '--tw-prose-headings': theme('colors.zinc.900'),
      '--tw-prose-links': theme('colors.emerald.500'),
      // ...CSS custom properties and element styles
      'color': 'var(--tw-prose-body)',
      'fontSize': theme('fontSize.sm')[0],
      'lineHeight': theme('lineHeight.7'),
      'p': { marginTop: theme('spacing.6'), marginBottom: theme('spacing.6') },
      'h1': { fontWeight: '700', fontSize: theme('fontSize.2xl')[0] },
      'h2': { fontWeight: '600', fontSize: theme('fontSize.lg')[0] },
      'h3': { fontWeight: '600', fontSize: theme('fontSize.base')[0] },
      // ...tables, lists, blockquotes, code, links
    },
  },
  invert: {
    css: {
      '--tw-prose-body': 'var(--tw-prose-invert-body)',
      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
      // ...remapped properties
    },
  },
})

Import

import typography from './typography.js'

// In tailwind-common-config.ts:
const config = {
  theme: {
    typography,
    // ...
  },
}

I/O Contract

Inputs

Name	Type	Required	Description
theme	Function	Yes	Tailwind theme() helper function for resolving design tokens

Outputs

Name	Type	Description
DEFAULT	object	Complete prose CSS rules for light mode
invert	object	CSS variable overrides for dark/inverted mode

Usage Examples

Applying Prose Styles

<!-- Light mode prose content -->
<article class="prose">
  <h1>Title</h1>
  <p>Body text with <a href="#">links</a> and <code>inline code</code>.</p>
</article>

<!-- Dark mode prose content -->
<article class="prose prose-invert">
  <h1>Dark Title</h1>
  <p>Inverted body text.</p>
</article>

Related Pages

• Principle:Langgenius_Dify_DesignSystem
• Principle:Langgenius_Dify_Theming