tailwind.config.js

module.exports = {
    content: [
        "./resources/**/*.antlers.html",
        "./resources/**/*.blade.php",
        "./content/**/*.md",
    ],
    darkMode: "selector",
    theme: {
        container: {
            center: true,
            padding: "1rem",
        },
        fontSize: {
            xs: ["12px", "20px"],
            sm: ["14px", "22px"],
            base: ["16px", "24px"],
            lg: ["18px", "26px"],
            xl: ["20px", "28px"],
            "2xl": ["24px", "32px"],
            "3xl": ["28px", "40px"],
            "4xl": ["40px", "48px"],
            "5xl": ["48px", "56px"],
            "6xl": ["56px", "64px"],
            "7xl": ["72px", "80px"],
        },
        extend: {
            boxShadow: {
                md: "0 10px 20px 0 rgba(25, 37, 72, 0.07)",
                xl: "10px 15px 30px 0 #19254880",
                sm: "0 30px 40px 0 rgba(200,207,228,0.2)",
            },
            fontFamily: {
                sans: "Inter, sans-serif",
            },
            colors: {
                primary: {
                    950: "var(--primary-950)",
                    900: "var(--primary-900)",
                    800: "var(--primary-800)",
                    700: "var(--primary-700)",
                    600: "var(--primary-600)",
                    500: "var(--primary-500)",
                    400: "var(--primary-400)",
                    300: "var(--primary-300)",
                    200: "var(--primary-200)",
                    100: "var(--primary-100)",
                },
                dark: {
                    900: "#0F1832",
                    800: "#141E3E",
                    700: "#192448",
                    650: "#2c3653",
                    600: "#2F3C67",
                    500: "#8C96B4",
                    400: "#A7B1CE",
                    300: "#C8CFE4",
                    250: "#dfd9ea",
                    200: "#DFE4F3",
                    100: "#F4F6FD",
                },
                blue: {
                    950: "#012377",
                    900: "#0231A8",
                    800: "#053CC6",
                    700: "#1E5BF4",
                    600: "#487CFF",
                    500: "#7FA3FF",
                    400: "#A7C0FF",
                    300: "#D5E1FF",
                    200: "#E8EFFF",
                    100: "#F5F8FF",
                },
                green: {
                    950: "#02462E",
                    900: "#05583A",
                    800: "#09744D",
                    700: "#109A68",
                    600: "#18C687",
                    500: "#46D19F",
                    400: "#74DDB7",
                    300: "#A3E8CF",
                    200: "#D1F4E7",
                    100: "#EEFFF9",
                },
                red: {
                    950: "#830606",
                    900: "#A11313",
                    800: "#C51E1E",
                    700: "#DE3C3C",
                    600: "#EF5353",
                    500: "#F88383",
                    400: "#FAA2A2",
                    300: "#FBC1C1",
                    200: "#FDE0E0",
                    100: "#FFF2F2",
                },
                gray: {
                    100: "#e7e9ea",
                    400: "#C0CCDA",
                },
            },
        },
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
        // eslint-disable-next-line no-undef
        require("tailwindcss-debug-screens"),
    ],
};