Panda CSS example config for fluidTypography.ts

panda.config.ts

import { defineConfig } from '@pandacss/dev';
import { fluidTypography } from './fluidTypography';

declare module '@pandacss/dev' {
  interface ThemeConfig {
    fluidFont: Record<string, FluidFontProps>;
  }
}

const config = defineConfig({
  theme: {
    extend: {
      fluidFont: {
        heading: { min: 2, max: 3 },
        body: { min: 1, max: 1.2 },
        custom: { min: 12, max: 16, minVw: 30, maxVw: 90, unit: 'px', vwUnit: 'vw' },
      },
    },
  },

  utilities: {
    extend: {
      fluidFont: fluidTypography({
        defaultUnit: 'rem',
        defaultVwUnit: 'vw',
        defaultMinVw: 20,
        defaultMaxVw: 80,
      }),
    },
  },
});

export default config;