tailwind.config.js

module.exports = {
    darkMode: "class",
    content: [
        "./components/**/*.{js,vue,ts}",
        "./layouts/**/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./nuxt.config.{js,ts}",
    ],
    theme: {
        extend: {
            keyframes: {
                "fade-in-left": {
                    "0%": {
                        opacity: "0",
                        transform: "translateX(-100px)",
                    },
                    "100%": {
                        opacity: "1",
                        transform: "translateX(0)",
                    },
                },
                "fade-in-right": {
                    "0%": {
                        opacity: "0",
                        transform: "translateX(100px)",
                    },
                    "100%": {
                        opacity: "1",
                        transform: "translateX(0)",
                    },
                },
                "rubber-band": {
                    "0%": {
                        transform: "scale3d(1, 1, 1)",
                    },
                    "30%": {
                        transform: "scale3d(1.25, 0.75, 1)",
                    },
                    "40%": {
                        transform: "scale3d(0.75, 1.25, 1)",
                    },
                    "50%": {
                        transform: "scale3d(1.15, 0.85, 1)",
                    },
                    "65%": {
                        transform: "scale3d(0.95, 1.05, 1)",
                    },
                    "75%": {
                        transform: "scale3d(1.05, 0.95, 1)",
                    },
                    "100%": {
                        transform: "scale3d(1, 1, 1)",
                    },
                },
            },
            animation: {
                "fade-in-right": "fade-in-right 0.5s ease-out 1",
                "fade-in-left": "fade-in-left 0.5s ease-out 1",
                "rubber-band": "rubber-band 1s ease-in-out 1",
            },
            spacing: {
                76: "17rem",
                124: "36rem",
                128: "40rem",
            },
            height: {
                124: "36rem",
                128: "40rem",
            },
        },
    },
    plugins: [require("@tailwindcss/typography")],
};