typography - Accelerator Docs

`typography`

Tailwind CSS plugin for generating responsive and fluid typography variant class names based on specified options.

@param options - Configuration options for the typography plugin.
@param options.breakpointKeys - An array of breakpoints (e.g., ['sm', 'md', 'lg']). The first breakpoint is required for all variants, and additional breakpoints are optional.
@param options.clamp - A global flag to enable or disable clamping across all variants. Clamping restricts the font size to a minimum and maximum value, preventing it from growing or shrinking too much. Defaults to false.
@param options.clampMax - A global flag to enable or disable clamping at the maximum font size. If true, the font size will not exceed the maximum value. This can be overridden per variant. Defaults to options.clamp value.
@param options.clampMin - A global flag to enable or disable clamping at the minimum font size. If true, the font size will not fall below the minimum value. This can be overridden per variant. Defaults to options.clamp value.
@param options.fluid - A global flag to enable or disable fluid typography across all breakpoints. Fluid typography adjusts font sizes between breakpoints. This can be overridden per variant. Defaults to false.
@param options.prefix - A string to prefix all generated class names with. For example, if prefix is set to 'type-', the generated class names would look like .type-variantName.
@param options.unit - The unit to be used for font size values, such as px, rem, or em. Defaults to px.
@param options.variants - An object mapping variant names to either a single typography variant or a variant map. Each variant may contain breakpoint-specific styles (e.g., { sm: { fontSize: 16 }, md: { fontSize: 20 } }), along with optional local clamp, clampMax, clampMin, and fluid flags.
@returns A Tailwind CSS plugin function that registers the typography styles.

Example


tailwind({
  breakpointKeys: ['xs', 'md', 'xl'] as const,
  prefix: 'type-' as const,
  unit: 'rem',
  fluid: true,
  variants: {
    h1: {
      xs: {
        fontFamily: 'var(--font-primary)',
        fontSize: 48,
        fontWeight: 700,
        lineHeight: 1.2,
        textTransform: 'uppercase',
      },
      md: { fontSize: 72 },
    },
    body1: {
      fontFamily: 'var(--font-secondary)',
      fontSize: 14,
      fontWeight: 400,
      lineHeight: 1.2,
    },
  },
})