vueless/ui.container-grid/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: {
    base: "grid",
    variants: {
      cols: {
        "1": "grid-cols-1",
        "2": "grid-cols-2",
        "3": "grid-cols-3",
        "4": "grid-cols-4",
        "5": "grid-cols-5",
        "6": "grid-cols-6",
        "7": "grid-cols-7",
        "8": "grid-cols-8",
        "9": "grid-cols-9",
        "10": "grid-cols-10",
        "11": "grid-cols-11",
        "12": "grid-cols-12",
      },
      rows: {
        "1": "grid-rows-1",
        "2": "grid-rows-2",
        "3": "grid-rows-3",
        "4": "grid-rows-4",
        "5": "grid-rows-5",
        "6": "grid-rows-6",
        "7": "grid-rows-7",
        "8": "grid-rows-8",
        "9": "grid-rows-9",
        "10": "grid-rows-10",
        "11": "grid-rows-11",
        "12": "grid-rows-12",
      },
      gap: {
        none: "gap-0",
        "3xs": "gap-0.5",
        "2xs": "gap-1",
        xs: "gap-2",
        sm: "gap-3",
        md: "gap-4",
        lg: "gap-5",
        xl: "gap-6",
        "2xl": "gap-7",
        "3xl": "gap-8",
      },
      rowGap: {
        none: "gap-y-0",
        "3xs": "gap-y-0.5",
        "2xs": "gap-y-1",
        xs: "gap-y-2",
        sm: "gap-y-3",
        md: "gap-y-4",
        lg: "gap-y-5",
        xl: "gap-y-6",
        "2xl": "gap-y-7",
        "3xl": "gap-y-8",
      },
      colGap: {
        none: "gap-x-0",
        "3xs": "gap-x-0.5",
        "2xs": "gap-x-1",
        xs: "gap-x-2",
        sm: "gap-x-3",
        md: "gap-x-4",
        lg: "gap-x-5",
        xl: "gap-x-6",
        "2xl": "gap-x-7",
        "3xl": "gap-x-8",
      },
      align: {
        start: "items-start",
        end: "items-end",
        center: "items-center",
        stretch: "items-stretch",
        baseline: "items-baseline",
        normal: "items-normal",
      },
      content: {
        start: "content-start",
        end: "content-end",
        center: "content-center",
        around: "content-around",
        evenly: "content-evenly",
        between: "content-between",
        normal: "content-normal",
        stretch: "content-stretch",
        baseline: "content-baseline",
      },
      justify: {
        start: "justify-items-start",
        end: "justify-items-end",
        "end-safe": "justify-items-end-safe",
        center: "justify-items-center",
        "center-safe": "justify-items-center-safe",
        stretch: "justify-items-stretch",
        normal: "justify-items-normal",
      },
      placeContent: {
        start: "place-content-start",
        end: "place-content-end",
        "end-safe": "place-content-end-safe",
        center: "place-content-center",
        "center-safe": "place-content-center-safe",
        around: "place-content-around",
        evenly: "place-content-evenly",
        between: "place-content-between",
        stretch: "place-content-stretch",
        baseline: "place-content-baseline",
      },
      placeItems: {
        start: "place-items-start",
        end: "place-items-end",
        "end-safe": "place-items-end-safe",
        center: "place-items-center",
        "center-safe": "place-items-center-safe",
        stretch: "place-items-stretch",
        baseline: "place-items-baseline",
      },
    },
  },
  defaults: {
    gap: "md",
    align: "normal",
    content: "normal",
    justify: "normal",
    placeContent: "start",
    placeItems: "start",
    tag: "div",
  },
};