tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./*.{html,js}"],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Maven Pro", "sans-serif"],
                display: ["Maven Pro", "sans-serif"],
                body: ["Maven Pro", "sans-serif"],
            },
            colors: {
                "electric-violet": {
                    50: "#ecefff",
                    100: "#dde1ff",
                    200: "#c1c7ff",
                    300: "#9ca2ff",
                    400: "#7975ff",
                    500: "#6755ff",
                    600: "#5734f5",
                    700: "#4c29d9",
                    800: "#3e24af",
                    900: "#352689",
                    950: "#211650",
                },
                "magenta-fuchsia": {
                    50: "#fff2ff",
                    100: "#fce3ff",
                    200: "#f9c6ff",
                    300: "#f999ff",
                    400: "#f75dff",
                    500: "#ec21ff",
                    600: "#d500f9",
                    700: "#b600cf",
                    800: "#9600a9",
                    900: "#7d0689",
                    950: "#55005e",
                },
                cinnabar: {
                    50: "#fef2f2",
                    100: "#fee2e2",
                    200: "#fecbca",
                    300: "#fba7a6",
                    400: "#f77472",
                    500: "#ec3a37",
                    600: "#da2b28",
                    700: "#b8201d",
                    800: "#981e1c",
                    900: "#7e201e",
                    950: "#440c0b",
                },
                pumpkin: {
                    50: "#fff9ec",
                    100: "#fff1d3",
                    200: "#ffdfa5",
                    300: "#ffc66d",
                    400: "#ffa232",
                    500: "#ff860a",
                    600: "#ff6d00",
                    700: "#cc4e02",
                    800: "#a13d0b",
                    900: "#82340c",
                    950: "#461804",
                },
                malachite: {
                    50: "#eefff4",
                    100: "#d7ffe7",
                    200: "#b2ffd1",
                    300: "#76ffad",
                    400: "#33f583",
                    500: "#09de61",
                    600: "#00c853",
                    700: "#049140",
                    800: "#0a7136",
                    900: "#0a5d2f",
                    950: "#003417",
                },
                "blue-ribbon": {
                    50: "#eef4ff",
                    100: "#d9e6ff",
                    200: "#bcd3ff",
                    300: "#8eb8ff",
                    400: "#5991ff",
                    500: "#2962ff",
                    600: "#1b46f5",
                    700: "#1433e1",
                    800: "#172ab6",
                    900: "#192a8f",
                    950: "#141b57",
                },
            },
        },
    },
    plugins: [require("@tailwindcss/forms")],
};