tailwind.config.ts

/** @type {import('tailwindcss').Config} */

const NearFormColors = {
  White: "hsla(0, 0%, 100%, 1)",
  Black: "hsla(0, 0%, 0%, 1)",
  Green: "hsla(163, 100%, 45%, 1)",
  Purple: "hsla(260, 100%, 70%, 1)",
  LightPurple: "hsla(262, 100%, 90%, 1)",
  Blue: "hsla(218, 100%, 64%, 1)",
  LightBlue: "hsla(217, 100%, 92%, 1)",
  Grey: "hsla(0, 0%, 85%, 1)",
  LightGrey: "#F4F8FA",
  DeepGrey: "hsla(240, 8%, 29%, 1)",
  Navy: "hsla(205, 78%, 21%, 1)",
  LightNavy: "hsla(222, 25%, 43%, 1)",
  DeepNavy: "hsla(225, 100%, 11%, 1)",
};

module.exports = {
  corePlugins: {
    preflight: false, // disable Tailwind's reset
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./docs/**/*.mdx"],
  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        white: NearFormColors.White,
        black: NearFormColors.Black,
        grayscale: {
          100: NearFormColors.White,
          200: NearFormColors.LightGrey,
          300: NearFormColors.Grey,
          400: NearFormColors.DeepGrey,
          500: NearFormColors.Black,
          800: "#888888",
        },
        "theme-1": NearFormColors.Green,
        "theme-2": NearFormColors.DeepNavy,
        "theme-3": NearFormColors.DeepNavy,
        "theme-4": NearFormColors.White,
        "header-bg": NearFormColors.White,
        "header-fg": NearFormColors.DeepNavy,
        "button-bg": NearFormColors.Green,
        "button-fg": NearFormColors.DeepNavy,
        "button-bg-hover": NearFormColors.White,
        "button-fg-hover": NearFormColors.DeepNavy,
        "button-border": NearFormColors.Green,
        error: "#FF0000",
      },
      width: {
        prose: "90ch",
      },
      fontFamily: {
        sans: ["Inter, Helvetica, Arial, sans-serif"],
      },
    },
  },
};