@myissue/vue-website-page-builder/src/utils/builder/tailwind-font-sizes.ts

Vue 3 page builder component with drag & drop functionality.

interface TailwindFontSizes {
  fontBase: string[]
  fontDesktop: string[]
  fontTablet: string[]
  fontMobile: string[]
}

const tailwindFontSizes: TailwindFontSizes = {
  // text-xs sm:text-2xl md:text-4xl lg:text-8xl
  fontBase: [
    'base:none',
    'text-xs',
    'text-sm',
    'text-base',
    'text-lg',
    'text-xl',
    'text-2xl',
    'text-3xl',
    'text-4xl',
    'text-5xl',
    'text-6xl',
    'text-7xl',
    'text-8xl',
    'text-9xl',
  ],
  fontDesktop: [
    'lg:none',
    'lg:text-xs',
    'lg:text-sm',
    'lg:text-base',
    'lg:text-lg',
    'lg:text-xl',
    'lg:text-2xl',
    'lg:text-3xl',
    'lg:text-4xl',
    'lg:text-5xl',
    'lg:text-6xl',
    'lg:text-7xl',
    'lg:text-8xl',
    'lg:text-9xl',
  ],
  fontTablet: [
    'md:none',
    'md:text-xs',
    'md:text-sm',
    'md:text-base',
    'md:text-lg',
    'md:text-xl',
    'md:text-2xl',
    'md:text-3xl',
    'md:text-4xl',
    'md:text-5xl',
    'md:text-6xl',
    'md:text-7xl',
    'md:text-8xl',
    'md:text-9xl',
  ],
  fontMobile: [
    'sm:none',
    'sm:text-xs',
    'sm:text-sm',
    'sm:text-base',
    'sm:text-lg',
    'sm:text-xl',
    'sm:text-2xl',
    'sm:text-3xl',
    'sm:text-4xl',
    'sm:text-5xl',
    'sm:text-6xl',
    'sm:text-7xl',
    'sm:text-8xl',
    'sm:text-9xl',
  ],
}

export default tailwindFontSizes