@myissue/vue-website-page-builder/src/utils/builder/tailwind-padding-margin.ts

Vue 3 page builder component with drag & drop functionality.

interface TailwindPaddingMargin {
  verticalPadding: string[]
  horizontalPadding: string[]
  verticalMargin: string[]
  horizontalMargin: string[]
}

const tailwindPaddingAndMargin: TailwindPaddingMargin = {
  verticalPadding: [
    'none',
    'lg:pbx-py-0',
    'lg:pbx-py-0.5',
    'lg:pbx-py-1',
    'lg:pbx-py-1.5',
    'lg:pbx-py-2',
    'lg:pbx-py-2.5',
    'lg:pbx-py-3',
    'lg:pbx-py-3.5',
    'lg:pbx-py-4',
    'lg:pbx-py-5',
    'lg:pbx-py-6',
    'lg:pbx-py-7',
    'lg:pbx-py-8',
    'lg:pbx-py-9',
    'lg:pbx-py-10',
    'lg:pbx-py-11',
    'lg:pbx-py-12',
    'lg:pbx-py-14',
    'lg:pbx-py-16',
    'lg:pbx-py-20',
    'lg:pbx-py-24',
    'lg:pbx-py-28',
    'lg:pbx-py-32',
    'lg:pbx-py-36',
    'lg:pbx-py-40',
    'lg:pbx-py-44',
    'lg:pbx-py-48',
    'lg:pbx-py-52',
    'lg:pbx-py-56',
    'lg:pbx-py-60',
    'lg:pbx-py-64',
    'lg:pbx-py-72',
    'lg:pbx-py-80',
    'lg:pbx-py-96',
  ],
  horizontalPadding: [
    'none',
    'lg:pbx-px-0',
    'lg:pbx-px-0.5',
    'lg:pbx-px-1',
    'lg:pbx-px-1.5',
    'lg:pbx-px-2',
    'lg:pbx-px-2.5',
    'lg:pbx-px-3',
    'lg:pbx-px-3.5',
    'lg:pbx-px-4',
    'lg:pbx-px-5',
    'lg:pbx-px-6',
    'lg:pbx-px-7',
    'lg:pbx-px-8',
    'lg:pbx-px-9',
    'lg:pbx-px-10',
    'lg:pbx-px-11',
    'lg:pbx-px-12',
    'lg:pbx-px-14',
    'lg:pbx-px-16',
    'lg:pbx-px-20',
    'lg:pbx-px-24',
    'lg:pbx-px-28',
    'lg:pbx-px-32',
    'lg:pbx-px-36',
    'lg:pbx-px-40',
    'lg:pbx-px-44',
    'lg:pbx-px-48',
    'lg:pbx-px-52',
    'lg:pbx-px-56',
    'lg:pbx-px-60',
    'lg:pbx-px-64',
    'lg:pbx-px-72',
    'lg:pbx-px-80',
    'lg:pbx-px-96',
  ],
  verticalMargin: [
    'none',
    'lg:pbx-my-0',
    'lg:pbx-my-0.5',
    'lg:pbx-my-1',
    'lg:pbx-my-1.5',
    'lg:pbx-my-2',
    'lg:pbx-my-2.5',
    'lg:pbx-my-3',
    'lg:pbx-my-3.5',
    'lg:pbx-my-4',
    'lg:pbx-my-5',
    'lg:pbx-my-6',
    'lg:pbx-my-7',
    'lg:pbx-my-8',
    'lg:pbx-my-9',
    'lg:pbx-my-10',
    'lg:pbx-my-11',
    'lg:pbx-my-12',
    'lg:pbx-my-14',
    'lg:pbx-my-16',
    'lg:pbx-my-20',
    'lg:pbx-my-24',
    'lg:pbx-my-28',
    'lg:pbx-my-32',
    'lg:pbx-my-36',
    'lg:pbx-my-40',
    'lg:pbx-my-44',
    'lg:pbx-my-48',
    'lg:pbx-my-52',
    'lg:pbx-my-56',
    'lg:pbx-my-60',
    'lg:pbx-my-64',
    'lg:pbx-my-72',
    'lg:pbx-my-80',
    'lg:pbx-my-96',
  ],
  horizontalMargin: [
    'none',
    'lg:pbx-mx-0',
    'lg:pbx-mx-0.5',
    'lg:pbx-mx-1',
    'lg:pbx-mx-1.5',
    'lg:pbx-mx-2',
    'lg:pbx-mx-2.5',
    'lg:pbx-mx-3',
    'lg:pbx-mx-3.5',
    'lg:pbx-mx-4',
    'lg:pbx-mx-5',
    'lg:pbx-mx-6',
    'lg:pbx-mx-7',
    'lg:pbx-mx-8',
    'lg:pbx-mx-9',
    'lg:pbx-mx-10',
    'lg:pbx-mx-11',
    'lg:pbx-mx-12',
    'lg:pbx-mx-14',
    'lg:pbx-mx-16',
    'lg:pbx-mx-20',
    'lg:pbx-mx-24',
    'lg:pbx-mx-28',
    'lg:pbx-mx-32',
    'lg:pbx-mx-36',
    'lg:pbx-mx-40',
    'lg:pbx-mx-44',
    'lg:pbx-mx-48',
    'lg:pbx-mx-52',
    'lg:pbx-mx-56',
    'lg:pbx-mx-60',
    'lg:pbx-mx-64',
    'lg:pbx-mx-72',
    'lg:pbx-mx-80',
    'lg:pbx-mx-96',
  ],
}

export default tailwindPaddingAndMargin