tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  future: {
    hoverOnlyWhenSupported: true,
  },
  theme: {
    extend: {
      screens: {
        coarse: { raw: "(pointer: coarse)" },
        fine: { raw: "(pointer: fine)" },
        "2x": { raw: "(min-resolution: 192dpi)" },
      },
      fontWeight: {
        normal: "var(--font-weight-normal)",
        bold: "var(--font-weight-bold)",
      },
      size: {},
    },
    fontFamily: {
      body: ['"iA Writer Quattro"', "system-ui", "sans-serif"],
      mono: ['"iA Writer Mono"', "monospace"],
    },
    fontSize: {
      sm: "var(--font-size-sm)",
      base: "var(--font-size-base)",
      lg: "var(--font-size-lg)",
      xl: "var(--font-size-xl)",
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      text: {
        DEFAULT: "var(--color-text)",
        secondary: "var(--color-text-secondary)",
        tertiary: "var(--color-text-tertiary)",
        highlight: "var(--color-text-highlight)",
        danger: "var(--color-text-danger)",
      },
      bg: {
        DEFAULT: "var(--color-bg)",
        inset: "var(--color-bg-inset)",
        card: "var(--color-bg-card)",
        overlay: "var(--color-bg-overlay)",
        backdrop: "var(--color-bg-backdrop)",
        "overlay-backdrop": "var(--color-bg-overlay-backdrop)",
        secondary: "var(--color-bg-secondary)",
        tertiary: "var(--color-bg-tertiary)",
        "code-block": "var(--color-bg-code-block)",
        highlight: "var(--color-bg-highlight)",
        selection: "var(--color-bg-selection)",
      },
      border: {
        DEFAULT: "var(--color-border)",
        secondary: "var(--color-border-secondary)",
        table: "var(--color-border-table)",
        focus: "var(--color-border-focus)",
      },
    },
    borderRadius: {
      none: "0",
      sm: "var(--border-radius-sm)",
      DEFAULT: "var(--border-radius-base)",
      lg: "var(--border-radius-lg)",
      xl: "var(--border-radius-xl)",
      full: "var(--border-radius-full)",
    },
    spacing: {
      0: "0px",
      px: "1px",
      0.5: "2px",
      1: "4px",
      1.5: "6px",
      2: "8px",
      2.5: "10px",
      3: "12px",
      4: "16px",
      5: "20px",
      6: "24px",
      7: "28px",
      8: "32px",
      9: "36px",
      10: "40px",
      11: "44px",
      12: "48px",
      14: "56px",
      16: "64px",
      20: "80px",
      24: "96px",
      28: "112px",
      32: "128px",
      36: "144px",
      40: "160px",
      44: "176px",
      48: "192px",
      52: "208px",
      56: "224px",
      60: "240px",
      64: "256px",
      72: "288px",
      80: "320px",
      96: "384px",
      icon: "var(--icon-size)",
    },
    lineHeight: {
      none: "1",
      3: "12px",
      4: "16px",
      5: "20px",
      6: "24px",
      7: "28px",
      8: "32px",
      9: "36px",
      10: "40px",
    },
  },
  plugins: [require("@tailwindcss/container-queries"), require("tailwindcss-animate")],
}