tailwind.config.js

import typographyPlugin from "@tailwindcss/typography";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      opacity: {
        15: "0.15",
      },
      colors: {
        primary: "rgb(var(--color-background) / <alpha-value>)", // background color
        contrast: "rgb(var(--color-background) / <alpha-value>)", // temporary background color - replace primary after
        secondary: "rgb(var(--color-inverse-background) / <alpha-value>)", // background inverse color
        body: "rgb(var(--color-text) / <alpha-value>)", // body text color
        "inv-body": "rgb(var(--color-inverse-text) / <alpha-value>)", // body text inverse color
        // btn: "rgb(var(--color-button) / <alpha-value>)", // button background color
        // "btn-content": "rgb(var(--color-button-text) / <alpha-value>)", // button text color
        // "inv-btn": "rgb(var(--color-inverse-button) / <alpha-value>)", // button inverse background color
        // "inv-btn-content":
        //   "rgb(var(--color-inverse-button-text) / <alpha-value>)", // button inverse text color
        sale: "rgb(var(--color-sale) / <alpha-value>)", // sale background color
        bar: "rgb(var(--color-border) / <alpha-value>)", // border color
      },
      outlineOffset: {
        3: "3px",
      },
      screens: {
        sm: "32em",
        md: "48em",
        lg: "64em",
        xl: "80em",
        "2xl": "96em",
        "sm-max": { max: "48em" },
        "sm-only": { min: "32em", max: "48em" },
        "md-only": { min: "48em", max: "64em" },
        "lg-only": { min: "64em", max: "80em" },
        "xl-only": { min: "80em", max: "96em" },
        "2xl-only": { min: "96em" },
      },
      spacing: {
        nav: "var(--height-nav)",
        screen: "var(--screen-height, 100vh)",
      },
      height: {
        screen: "var(--screen-height, 100vh)",
        "screen-no-nav":
          "calc(var(--screen-height, 100vh) - var(--height-nav))",
        "screen-dynamic": "var(--screen-height-dynamic, 100vh)",
      },
      width: {
        mobileGallery: "calc(100vw - 3rem)",
      },
      fontFamily: {
        sans: ["Poppins", "ui-sans-serif", "system-ui", "sans-serif"],
        serif: ["Arial", '"IBMPlexSerif"', "Palatino", "ui-serif"],
      },
      fontSize: {
        scale: [
          "calc(var(--min-size-px) + (var(--max-size) - var(--min-size)) * ((100vw - var(--wv-min-viewport-size, 320) * 1px) / (var(--wv-max-viewport-size, 1920) - var(--wv-min-viewport-size, 320))))",
          1,
        ],
        xs: ["calc(var(--body-base-size) * 0.75)", 1],
        sm: ["calc(var(--body-base-size) * 0.875)", 1.25],
        base: ["var(--body-base-size)", "var(--body-base-line-height)"],
        lg: ["calc(var(--body-base-size) * 1.125)", 1.75],
        xl: ["calc(var(--body-base-size) * 1.25)", 1.75],
        "2xl": ["calc(var(--body-base-size) * 1.5)", 2],
        "3xl": ["calc(var(--body-base-size) * 1.875)", 2.25],
        "4xl": ["calc(var(--body-base-size) * 2.25)", 2.5],
        "5xl": ["calc(var(--body-base-size) * 3)", 1],
        "6xl": ["calc(var(--body-base-size) * 3.75)", 1],
        "7xl": ["calc(var(--body-base-size) * 4.5)", 1],
        "8xl": ["calc(var(--body-base-size) * 6)", 1],
        "9xl": ["calc(var(--body-base-size) * 8)", 1],
      },
      lineHeight: {
        normal: "var(--body-base-line-height)",
      },
      letterSpacing: {
        normal: "var(--body-base-letter-spacing)",
      },
      maxWidth: {
        "prose-narrow": "45ch",
        "prose-wide": "80ch",
      },
      boxShadow: {
        border: "inset 0px 0px 0px 1px rgb(var(--color-border) / 0.08)",
        header: "inset 0px -1px 0px 0px rgba(21, 21, 21, 0.05)",
      },
      zIndex: {
        1: "1",
      }
    },
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
    typographyPlugin,
  ],
};