site_8g/tailwind.config.ts

import type { Config } from "tailwindcss";
const plugin = require("tailwindcss/plugin");
const MAX_WIDTH = 1440;
const toRem = (px: number) => {
    return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
};
const keyframes = {
    "slow-bounce": {
        "0%,100%": {
            transform: "translateY(-10px)",
            animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)",
        },

        "50%": {
            transform: "none",
            animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
        },
    },

    shake: {
        "10%,90% ": {
            transform: "translate3d(-1px, 0, 0) rotate(-1deg)",
        },
        "20%,80%": {
            transform: "translate3d(2px, 0, 0) rotate(1deg)",
        },
        "30%,70%": {
            transform: "translate3d(-3px, 0, 0) rotate(-3deg)",
        },
        "40%,60%": {
            transform: "translate3d(3px, 0, 0) rotate(1deg)",
        },
        "50%": {
            transform: "translate3d(-3px, 0, 0) rotate(3deg)",
        },
    },
};
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))",
            },
            padding: {
                "spacing-x": "0.12rem",
                "spacing-y": "0.08rem",
            },

            textShadow: {},
            keyframes: keyframes,
            animation: {
                "slow-bounce": "slow-bounce   1s linear infinite",
                "slow-shake": "shake 0.8s ease-in-out infinite",
            },
        },
        colors: {
            "primary-color": "var(--primary-color)",
            "bg-color": "var(--bg-color)",
            "bg-block-color": "var(--bg-block-color)",
            "linear-color": "linear-gradient(180deg, #ffaa30, #ffe6be)",
        },
    },
    plugins: [
        plugin(function ({ addUtilities }: any) {
            addUtilities({
                "text-stroke": {
                    webkitTextStroke: "1px #fff",
                },
            });
        }),
    ],
};
export default config;