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 .text-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',
  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,
    },
  },
})

`TypographyOptionsVariant`

Interface representing the properties of a typography variant.

`TypographyOptions`

Interface for the typography options used to configure the plugin.

`TypographyOptionsVariantMap`

Interface representing a typography variant map.

`TypographyOptionsVariants`

Type representing a collection of typography variants.

`TypographyReturnVariant`

Type representing a returned typography variant, which can include various properties like font size.

`TypographyReturnVariantMap`

Type representing a returned typography variant map with responsive properties.

`TypographyReturnVariants`

Type representing the final returned set of typography variants.

useTimeout AnyFunction