tailwind.config.js

const colors = require("tailwindcss/colors")
const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
  mode: "jit",
  purge: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ["Jetbrains Mono", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        // Now we build the full color palette, using all colors available
        // as shown at this link: https://tailwindcss.com/docs/customizing-colors#color-palette-reference
        transparent: "transparent",
        current: "currentColor",
        black: "#000",
        white: "#fff",
        bluegray: colors.blueGray,
        coolgray: colors.coolGray,
        gray: colors.gray,
        truegray: colors.trueGray,
        warmgray: colors.warmGray,
        red: colors.red,
        orange: colors.orange,
        amber: colors.amber,
        yellow: colors.yellow,
        lime: colors.lime,
        green: colors.green,
        emerald: colors.emerald,
        teal: colors.teal,
        cyan: colors.cyan,
        sky: colors.sky,
        blue: colors.blue,
        indigo: colors.indigo,
        violet: colors.violet,
        purple: colors.purple,
        fuchsia: colors.fuchsia,
        pink: colors.pink,
        rose: colors.rose,
      },
    },
  },
  variants: {
    extend: {
      shadows: {
        innerxl: "inset 0 8px 16px rgba(0, 0, .86)",
      },
      colors: {
        interplanetaryblue: {
          50: "#92e2ff",
          100: "#78c4ff",
          200: "#5aa6ff",
          300: "#3c88ff",
          400: "#1e5aff",
          500: "#004cff",
          600: "#002EE1",
          700: "#0010C3",
          800: "#0000A5",
          900: "#000087",
        },
        interplanetaryyellow: {
          50: "#ffff32",
          100: "#ffff28",
          200: "#fff51e",
          300: "#ffeb14",
          400: "#ffe10a",
          500: "#ffd700",
          600: "#f5cd00",
          700: "#ebc300",
          800: "#e1b900",
          900: "#d7af00",
        },
        turquoise: {
          50: "#ecf9f9",
          100: "#d1f7f5",
          200: "#9ef1e8",
          300: "#60e7db",
          400: "#1ed5c6",
          500: "#09bcaa",
          600: "#08a18d",
          700: "#0d8371",
          800: "#106659",
          900: "#105248",
        },
        royalblue: {
          50: "#f5fafd",
          100: "#e4f6fc",
          200: "#c0e7fa",
          300: "#96d2f8",
          400: "#5cacf7",
          500: "#2e81f5",
          600: "#205dee",
          700: "#1f49d2",
          800: "#1b38a0",
          900: "#162e7b",
        },
        denim: {
          50: "#f4f8fc",
          100: "#e8f1fb",
          200: "#cedcfa",
          300: "#b1c2f9",
          400: "#8a97f8",
          500: "#626af8",
          600: "#4948f2",
          700: "#3c39dd",
          800: "#302eb0",
          900: "#27278a",
        },
        flamingo: {
          50: "#f9f6f9",
          100: "#f7eaf8",
          200: "#efccf5",
          300: "#e9a9f0",
          400: "#e778ec",
          500: "#e54ce7",
          600: "#d12fd9",
          700: "#a525b9",
          800: "#7c208b",
          900: "#611c6b",
        },
        hotpink: {
          50: "#fbf8f9",
          100: "#fbeef6",
          200: "#f7d1ee",
          300: "#f4ace2",
          400: "#f576d0",
          500: "#f54abb",
          600: "#e92d9a",
          700: "#c12379",
          800: "#931d59",
          900: "#721945",
        },
        tomato: {
          50: "#fbf7f3",
          100: "#fcefe5",
          200: "#f9dbc8",
          300: "#f7bc97",
          400: "#f78e57",
          500: "#f7632f",
          600: "#ed411e",
          700: "#cc3120",
          800: "#a22722",
          900: "#81201f",
        },
        carrot: {
          50: "#faf6eb",
          100: "#faf0cf",
          200: "#f7e399",
          300: "#f3cd56",
          400: "#eeab20",
          500: "#eb860d",
          600: "#db6108",
          700: "#b8490d",
          800: "#943913",
          900: "#772e14",
        },

        olive: {
          50: "#fafbf4",
          100: "#f9f9dc",
          200: "#f0f39d",
          300: "#e4e555",
          400: "#c2cc1c",
          500: "#96b008",
          600: "#6e8e05",
          700: "#546d07",
          800: "#40510c",
          900: "#313f0d",
        },
        limegreen: {
          50: "#f0f9f7",
          100: "#def7ee",
          200: "#b9f2d7",
          300: "#80e8ba",
          400: "#32d68b",
          500: "#11bf5d",
          600: "#0ea343",
          700: "#14843c",
          800: "#176637",
          900: "#15522f",
        },
      },
    },
  },
  // eslint-disable-next-line global-require
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
}