tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js,ts,tsx,rs}"],
    plugins: [require("@headlessui/tailwindcss")],
    theme: {
        extend: {
            transitionTimingFunction: {
                "in-back": "cubic-bezier(0.36, 0, 0.66, -0.56)",
                "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
                "in-back-md": "cubic-bezier(0.36, 0, 0.66, -0.96)",
                "out-back-md": "cubic-bezier(0.34, 1.96, 0.64, 1)",
                "in-back-xl": "cubic-bezier(0.36, 0, 0.66, -1.96)",
                "out-back-xl": "cubic-bezier(0.34, 2.96, 0.64, 1)",
            },
            keyframes: {
                fade: {
                    "0%": { opacity: 0 },
                    "100%": { opacity: 1 },
                },
            },
            colors: {
                "cyber-grey": {
                    0: "#fbfbfc",
                    5: "#edeef2",
                    10: "#d6d7db",
                    20: "#bfc0c4",
                    30: "#a9aaae",
                    40: "#929397",
                    50: "#7b7c80",
                    60: "#66676a",
                    70: "#515255",
                    80: "#3c3c3f",
                    90: "#27272a",
                    100: "#121214",
                },
                "cyber-red": {
                    5: "#fcf1e8",
                    10: "#ffd4c2",
                    20: "#fab29a",
                    30: "#f58672",
                    40: "#f15b4a",
                    50: "#e83626",
                    60: "#c02425",
                    70: "#951b27",
                    80: "#6a1229",
                    90: "#3e0923",
                },
                "cyber-orange": {
                    5: "#fef8e1",
                    10: "#ffedb8",
                    20: "#fbd38f",
                    30: "#f8ba65",
                    40: "#f5a03c",
                    50: "#ef8616",
                    60: "#c75f0f",
                    70: "#9b410c",
                    80: "#702208",
                    90: "#450505",
                },
                "cyber-yellow": {
                    5: "#f7fae1",
                    10: "#faf9c5",
                    20: "#f7f6a3",
                    30: "#f8f67e",
                    40: "#f8ea4f",
                    50: "#f5db32",
                    60: "#deab2b",
                    70: "#b97618",
                    80: "#7f3b0b",
                    90: "#531904",
                },
                "cyber-green": {
                    5: "#f0fbda",
                    10: "#e6f8be",
                    20: "#c7ee99",
                    30: "#98e076",
                    40: "#72d352",
                    50: "#4bc72e",
                    60: "#399f2f",
                    70: "#267730",
                    80: "#124a2b",
                    90: "#042325",
                },
                "cyber-cyan": {
                    5: "#e6faf3",
                    10: "#c9f8ed",
                    20: "#9fe7ea",
                    30: "#6ccee4",
                    40: "#3bbce3",
                    50: "#04a7ec",
                    60: "#0085cc",
                    70: "#035996",
                    80: "#023974",
                    90: "#011846",
                },
                "cyber-blue": {
                    5: "#e0f7ff",
                    10: "#c2efff",
                    20: "#94d2fb",
                    30: "#5bb2f5",
                    40: "#3094ff",
                    50: "#0b7bff",
                    60: "#0b5eca",
                    70: "#0f4594",
                    80: "#092c66",
                    90: "#031338",
                },
                "cyber-indigo": {
                    5: "#e6f3ff",
                    10: "#c4e0ff",
                    20: "#84b3f0",
                    30: "#568be2",
                    40: "#2a64d1",
                    50: "#0446cc",
                    60: "#04359d",
                    70: "#072977",
                    80: "#0b1e50",
                    90: "#0e1229",
                },
                "cyber-purple": {
                    5: "#f7f0ff",
                    10: "#f0e0ff",
                    20: "#cab6fa",
                    30: "#a68ff5",
                    40: "#8167f0",
                    50: "#5c3feb",
                    60: "#4c33bf",
                    70: "#3c2693",
                    80: "#2c1a67",
                    90: "#1c0d3b",
                },
                "cyber-pink": {
                    5: "#fcf0f1",
                    10: "#ffe6ec",
                    20: "#fcc2e1",
                    30: "#f99ed6",
                    40: "#f579cb",
                    50: "#f255c0",
                    60: "#c445a3",
                    70: "#973585",
                    80: "#6a2568",
                    90: "#3c154a",
                },
            },
        },
    },
};