Skip to main content

Functions

Exported functions and utilities from Fluid Typography.

Plugin Function​

Default Export​

The main plugin function for Tailwind CSS.

export default plugin.withOptions<PluginOptions>(
  (options = {}) => ({ addComponents }) => { ... }
)

Usage​

tailwind.config.ts
import fluidTypography from 'fluid-typography'

export default {
  plugins: [fluidTypography()]
}

With Options​

import fluidTypography from 'fluid-typography'

export default {
  plugins: [
    fluidTypography({
      customScales: {
        'hero': { size: [50, 80] }
      },
      minViewportWidth: 320,
      maxViewportWidth: 1920
    })
  ]
}

getTypographySafelist​

Generate safelist array for all typography classes.

export function getTypographySafelist(options?: PluginOptions): string[]

Parameters​

  • options (optional): Plugin options with custom scales

Returns​

Array of typography class names (e.g., ['text-h1', 'text-body', 'text-hero'])

Usage​

tailwind.config.ts
import fluidTypography, { getTypographySafelist } from 'fluid-typography'

const options = {
  customScales: {
    'hero': { size: [50, 80] }
  }
}

export default {
  plugins: [fluidTypography(options)],
  safelist: getTypographySafelist(options)
}

When to Use​

Use getTypographySafelist when:

  • Using conditional class rendering
  • Dynamically generating class names
  • Building class names from variables
// Without safelist - may not work
const size = 'h1'
<h1 className={`text-${size}`}>Heading</h1>

// With safelist - works correctly
// (After adding to safelist in config)

Examples​

// Default scales only
const safelist = getTypographySafelist()
// ['text-display-2xl', 'text-display-xl', ..., 'text-caption', 'text-overline']

// With custom scales
const safelist = getTypographySafelist({
  customScales: {
    'hero': { size: [50, 80] },
    'mega': { size: [60, 120] }
  }
})
// [...default classes, 'text-hero', 'text-mega']

getFluidTypographyMergeConfig​

Generate tailwind-merge configuration for fluid typography classes.

export function getFluidTypographyMergeConfig(
  options?: PluginOptions
): ExtendedConfig

Parameters​

  • options (optional): Plugin options with custom scales

Returns​

Configuration object for extendTailwindMerge

Usage​

lib/utils.ts
import { extendTailwindMerge } from "tailwind-merge"
import { getFluidTypographyMergeConfig } from "fluid-typography/merge"

const twMerge = extendTailwindMerge(
  getFluidTypographyMergeConfig()
)

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

With Custom Scales​

import { getFluidTypographyMergeConfig } from "fluid-typography/merge"

const twMerge = extendTailwindMerge(
  getFluidTypographyMergeConfig({
    customScales: {
      'hero': { size: [50, 80] }
    }
  })
)

Examples​

// Basic usage
const config = getFluidTypographyMergeConfig()
const twMerge = extendTailwindMerge(config)

// Test merging
twMerge('text-h1 text-body')  // => 'text-body'
twMerge('text-body text-h1')  // => 'text-h1'

getFluidTypographyPreset​

Get Tailwind preset with fluid typography theme configuration.

export function getFluidTypographyPreset(
  options?: PluginOptions
): Partial<Config>

Parameters​

  • options (optional): Plugin options with custom scales

Returns​

Partial Tailwind config with theme extensions

Usage​

tailwind.config.ts
import { getFluidTypographyPreset } from 'fluid-typography/preset'

export default {
  presets: [getFluidTypographyPreset()],
  // ... your config
}

With Custom Scales​

import { getFluidTypographyPreset } from 'fluid-typography/preset'

export default {
  presets: [
    getFluidTypographyPreset({
      customScales: {
        'hero': {
          size: [50, 80],
          fontWeight: '900'
        }
      }
    })
  ]
}

Access Theme Values​

// In your Tailwind config
theme: {
  extend: {
    // Access fluid typography scales
    spacing: {
      'hero': theme('fluidTypography.hero')
    }
  }
}

getFluidTypographyScale​

Get the fluid typography scale object.

export function getFluidTypographyScale(
  options?: PluginOptions
): Record<string, ScaleTuple>

Parameters​

  • options (optional): Plugin options with custom scales

Returns​

Object mapping scale names to ScaleTuple values

Usage​

import { getFluidTypographyScale } from 'fluid-typography/preset'

const scale = getFluidTypographyScale()
console.log(scale['h1'])  // [28, 36]

Examples​

// Default scales
const defaultScale = getFluidTypographyScale()
// {
//   'display-2xl': [48, 72],
//   'display-xl': [40, 60],
//   'h1': [28, 36],
//   'body': [14, 16],
//   ...
// }

// With custom scales
const customScale = getFluidTypographyScale({
  customScales: {
    'hero': { size: [50, 80] }
  }
})
// { ...defaultScale, 'hero': [50, 80] }

// Extend the scale
const extendedScale = {
  ...getFluidTypographyScale(),
  'custom-xl': [50, 80]
}

getFluidTypographyTheme​

Get theme extension object for manual configuration.

export function getFluidTypographyTheme(
  options?: PluginOptions
): Record<string, Record<string, ScaleTuple>>

Parameters​

  • options (optional): Plugin options with custom scales

Returns​

Theme object for Tailwind config

Usage​

tailwind.config.ts
import { getFluidTypographyTheme } from 'fluid-typography/preset'

export default {
  theme: {
    extend: {
      ...getFluidTypographyTheme()
    }
  }
}

Examples​

// Basic usage
const theme = getFluidTypographyTheme()
// { fluidTypography: { 'h1': [28, 36], ... } }

// With custom scales
const customTheme = getFluidTypographyTheme({
  customScales: {
    'hero': { size: [50, 80] }
  }
})

Complete Example​

tailwind.config.ts
import type { Config } from 'tailwindcss'
import fluidTypography, {
  getTypographySafelist,
  DEFAULT_SCALE
} from 'fluid-typography'
import type { PluginOptions } from 'fluid-typography'

// Define options
const options: PluginOptions = {
  customScales: {
    'hero': {
      size: [50, 80],
      lineHeight: 1.1,
      fontWeight: '900'
    }
  },
  minViewportWidth: 320,
  maxViewportWidth: 1920
}

// Use in config
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  safelist: getTypographySafelist(options),
  plugins: [fluidTypography(options)]
} satisfies Config

// Access default scales if needed
console.log(DEFAULT_SCALE['h1'])  // [28, 36]

Next Steps​