@viivue/tailwindcss-preset/example/theme.config.json

TailwindCSS preset that supports CSS variables, responsive pixel-based values, desktop-first, helper components and more.

{
  "prefix": "vii-",
  "colors": {
    "black": "#000",
    "white": "#fff",
    "purple": "#9650A5",
    "green": "#96C382",
    "indigo": "#605C80",
    "blue": "#49ABE3",
    "yellow": "#FEE882"
  },
  "fontFamily": {
    "primary": [
      "Lexend",
      "sans-serif"
    ],
    "heading": [
      "Comfortaa",
      "sans-serif"
    ],
    "icomoon": [
      "icomoon",
      "fantasy"
    ]
  },
  "fontWeight": {
    "primary": [
      400,
      500,
      600,
      700
    ],
    "heading": [
      700
    ]
  },
  "fontSize": {
    "14": "14px",
    "16": "16px",
    "18": "18px",
    "20": "20px",
    "24": "24px",
    "32": "32px",
    "40": "40px",
    "48": "48px",
    "h1": "var(--vii-size-48)",
    "h2": "var(--vii-size-40)",
    "h3": "var(--vii-size-32)",
    "h4": "var(--vii-size-24)",
    "h5": "var(--vii-size-20)",
    "h6": "var(--vii-size-18)",
    "body": "var(--vii-size-16)",
    "tagline": "var(--vii-size-14)"
  },
  "fontSizeResponsive": {
    "md": {
      "24": "20px",
      "32": "24px",
      "40": "28px",
      "48": "32px"
    }
  },
  "spacing": {
    "default": "var(--vii-spacing-80)",
    "heading": "var(--vii-spacing-20)",
    "paragraph": "var(--vii-spacing-20)",
    "gap-container": "40px",
    "gap-vc-column": "12px"
  },
  "spacingResponsive": {
    "md": {
      "gap-container": "20px",
      "gap-vc-column": "10px"
    },
    "sm": {},
    "xs": {}
  },
  "container": {
    "default": "1392px",
    "small": "700px"
  },
  "screens": {
    "xl": {
      "min": "1561px"
    },
    "lg": {
      "max": "1560px"
    },
    "md": {
      "max": "1180px"
    },
    "sm": {
      "max": "768px"
    },
    "xs": {
      "max": "480px"
    }
  },
  "variants": {
    "search-open": "html.search-open &",
    "menu-open": "html.menu-open &",
    "scroll-middle": "body.scroll-middle &",
    "scroll-up": "body.scroll-up &"
  }
}