import type { Config } from "tailwindcss";

const MAX_WIDTH = 1440;
const toRem = (px: number) => {
    return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
};

const size: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
    map[index] = toRem(index);
    return map;
}, {});

// 0.0694rem
const config: Config = {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        space: size,
        padding: size,
        height: size,
        minWidth: size,
        lineHeight: size,
        width: size,
        gap: size,
        minHeight: size,
        fontSize: size,
        extend: {
            backgroundImage: {
                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                "gradient-conic":
                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
            },
        },
        colors: {
            "primary-color": "var(--primary-color)",
            "linear-color": "linear-gradient(180deg, #ffaa30, #ffe6be)",
        },
    },
    plugins: [],
};
export default config;