@myissue/vue-website-page-builder/src/utils/builder/tailwind-border-radius.ts

Vue 3 page builder component with drag & drop functionality.

interface TailwindBorderRadius {
  roundedGlobal: string[]
  roundedTopLeft: string[]
  roundedTopRight: string[]
  roundedBottomLeft: string[]
  roundedBottomRight: string[]
}

const tailwindBorderRadius: TailwindBorderRadius = {
  roundedGlobal: [
    'none',
    'rounded-sm',
    'rounded',
    'rounded-md',
    'rounded-lg',
    'rounded-xl',
    'rounded-2xl',
    'rounded-3xl',
    'rounded-full',
  ],
  roundedTopLeft: [
    'none',
    'rounded-tl-sm',
    'rounded-tl',
    'rounded-tl-md',
    'rounded-tl-lg',
    'rounded-tl-xl',
    'rounded-tl-2xl',
    'rounded-tl-3xl',
    'rounded-tl-full',
  ],
  roundedTopRight: [
    'none',
    'rounded-tr-sm',
    'rounded-tr',
    'rounded-tr-md',
    'rounded-tr-lg',
    'rounded-tr-xl',
    'rounded-tr-2xl',
    'rounded-tr-3xl',
    'rounded-tr-full',
  ],
  roundedBottomLeft: [
    'none',
    'rounded-bl-sm',
    'rounded-bl',
    'rounded-bl-md',
    'rounded-bl-lg',
    'rounded-bl-xl',
    'rounded-bl-2xl',
    'rounded-bl-3xl',
    'rounded-bl-full',
  ],
  roundedBottomRight: [
    'none',
    'rounded-br-sm',
    'rounded-br',
    'rounded-br-md',
    'rounded-br-lg',
    'rounded-br-xl',
    'rounded-br-2xl',
    'rounded-br-3xl',
    'rounded-br-full',
  ],
}

export default tailwindBorderRadius