tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      serif: "Merriweather, serif",
      sans:
        'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", ' +
        'Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", ' +
        '"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif',
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: "#fff",
      black: "#000",
      g: {
        0: "#fcfcfc",
        1: "#f9f9f9",
        2: "#f1f1f1",
        3: "#e2e2e2",
        4: "#cfcfcf",
        5: "#b6b6b6",
        6: "#999999",
        7: "#787878",
        8: "#545454",
        9: "#2e2e2e",
      },
      red: {
        0: "#ffe4da",
        1: "#ffc8b5",
        2: "#ffac92",
        3: "#ff8f6f",
        4: "#ff6f4e",
        5: "#ff4a2b",
        DEFAULT: "#ff0000",
        6: "#ff0000",
        7: "#d70000",
        8: "#b10303",
        9: "#920a0a",
      },
      beige: "#f4f1ee",
      "tw-blue": "#99d9f1",
      "fb-blue": "#009edb",
      orange: "#ff6c36",
      green: "#78bc20",
      yellow: {
        0: "#fefce8",
        1: "#fffac2",
        2: "#fff187",
        3: "#ffe243",
        DEFAULT: "#ffcb03",
        4: "#ffcb03",
        5: "#efb403",
        6: "#ce8b00",
        7: "#a46204",
        8: "#884c0b",
        9: "#733e10",
      },
      blue: {
        0: "#f0faff",
        1: "#e0f4fe",
        2: "#b9eafe",
        3: "#7cdbfd",
        4: "#36cafa",
        5: "#0cb4eb",
        DEFAULT: "#009edb",
        6: "#009edb",
        7: "#0173a3",
        8: "#066186",
        9: "#0b506f",
      },
      navy: {
        0: "#f3f6fc",
        1: "#e6edf8",
        2: "#c8d9ef",
        3: "#97b8e2",
        4: "#6093d0",
        5: "#3b75bc",
        6: "#2b5b9e",
        7: "#244980",
        DEFAULT: "#22416e",
        8: "#22416e",
        9: "#20375a",
      },
      "election-green": {
        lightest: "#daece9",
        lighter: "#aad4cc",
        DEFAULT: "#1b998b",
        darker: "#1e877b",
        darkest: "#1d534c",
      },
      eyebrow: "var(--eyebrow-color)",
      "eyebrow-bg": "var(--eyebrow-bg)",
      hed: "var(--hed-color)",
      dek: "var(--dek-color)",
      byline: "var(--byline-color)",
      date: "var(--date-color)",
      credit: "var(--credit-color)",
    },
    extend: {
      animation: {
        "become-sticky":
          "becomeSticky 1s cubic-bezier(0.79, 0.1, 0.44, 0.83) forwards .25s",
      },
      keyframes: {
        becomeSticky: {
          "0%": { bottom: "-100%" },
          "100%": { bottom: "0" },
        },
      },
      boxShadow: {
        beige: "0 0 0 3px #f4f1ee80",
      },
      dropShadow: {
        outline: "0 1px 1px rgba(0, 0, 0, 0.5)",
      },
      gridTemplateColumns: {
        14: "repeat(14, 1fr)",
      },
      gridColumnStart: {
        13: "13",
        14: "14",
        15: "15",
      },
      gridColumnEnd: {
        13: "13",
        14: "14",
        15: "15",
      },
      gridColumn: {
        "span-14": "1 / span 14",
      },
      lineHeight: {
        normal: "1.6",
        hed: "1.15",
      },
      spacing: {
        "16x9": `${(100 * 9) / 16}%`,
      },
      screens: {
        sm: "640px",
        md: "850px",
        lg: "1080px",
        xl: "1280px",
      },
      maxWidth: {
        content: "730px",
      },
    },
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  darkMode: "media",
  content: ["./hugo_stats.json"],
};