tailwind.config.js

module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.liquid"],
  theme: {
    screens: {
      xs: "576px",
      sm: "768px",
      md: "992px",
      lg: "1100px",
      xl: "1440px",
    },
    colors: {
      transparent: "transparent",

      black: "#000",
      white: "#fff",
      "color-text": "var(--color-text)",
      "color-headings": "var(--color-headings)",
      "color-link": "var(--color-link)",
      "color-link-hover": "var(--color-link-hover)",
      gray: {
        100: "var(--color-gray-100)",
        200: "var(--color-gray-200)",
        300: "var(--color-gray-300)",
        400: "var(--color-gray-400)",
        500: "var(--color-gray-500)",
        600: "var(--color-gray-600)",
        700: "var(--color-gray-700)",
        800: "var(--color-gray-800)",
        900: "var(--color-gray-900)",
      },
      "on-sale": "var(--color-on-sale)",
      brand: {
        100: "var(--color-brand-100)",
        300: "var(--color-brand-300)",
        500: "var(--color-brand-500)",
        700: "var(--color-brand-700)",
        800: "var(--color-brand-800)",
        900: "var(--color-brand-900)",
      },
      yellow: {
        200: "var(--color-yellow-200)",
        500: "var(--color-yellow-500)",
      },
      orange: {
        200: "var(--color-orange-200)",
        500: "var(--color-orange-500)",
      },
      red: {
        200: "var(--color-red-200)",
        500: "var(--color-red-500)",
      },
      purple: {
        200: "var(--color-purple-200)",
        500: "var(--color-purple-500)",
      },
      green: {
        200: "var(--color-green-200)",
        500: "var(--color-green-500)",
      },
    },
    boxShadow: {
      xs: "0 8px 4px 0px rgba(0, 0, 0, 0.05)",
      sm: "0 18px 15px 0 rgba(0, 0, 0, 0.05)",
      default: "0 15px 50px rgba(0,0,0,.05)",
      md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
      outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      none: "none",
    },
    container: {
      center: true,
      padding: "2rem",
    },
    fontFamily: {
      body: "var(--font-body)",
      heading: "var(--font-heading)",
      mono: ["Menlo", "Monaco", "Consolas", '"Liberation Mono"', '"Courier New"', "monospace"],
    },
    fontSize: {
      xs: "0.75rem",
      sm: "0.875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem",
      "7xl": "5rem",
    },
    fontWeight: {
      // hairline: "100",
      // thin: "200",
      light: "300",
      normal: "400",
      // medium: "500",
      semibold: "600",
      bold: "700",
      // extrabold: "800",
      black: "900",
    },
    extend: {
      backgroundOpacity: {
        1: "0.01",
        3: "0.03",
        10: "0.1",
        15: "0.15",
        20: "0.2",
        50: "0.5",
        80: "0.8",
        85: "0.85",
        90: "0.9",
        95: "0.95",
      },
      padding: {
        "50p": "50%",
        "60p": "60%",
        "70p": "70%",
        "80p": "80%",
        "90p": "90%",
        "100p": "100%",
        "110p": "110%",
        "120p": "120%",
        "130p": "130%",
      },
    },
  },
};