Call-Forwarding-App/tailwind.config.js at master · Software-Guardians/Call-Forwarding-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                // Using CSS variables for Theming support
                // Syntax: rgb(var(--variable-name) / <alpha-value>)
                "primary": "rgb(var(--color-primary) / <alpha-value>)",
                "primary-dim": "rgb(var(--color-primary) / 0.1)",
                "secondary": "rgb(var(--color-secondary) / <alpha-value>)",
                "accent-green": "rgb(var(--color-accent-green) / <alpha-value>)",
                "background-dark": "rgb(var(--color-background-dark) / <alpha-value>)",
                "surface-dark": "rgb(var(--color-surface-dark) / <alpha-value>)",
                "surface-glass": "rgba(10, 20, 31, 0.6)", // Keeping glass fixed or make variable if needed
            },
            fontFamily: {
                "display": ["Rajdhani", "sans-serif"],
                "body": ["Inter", "sans-serif"],
                "mono": ["Share Tech Mono", "monospace"],
            },
            boxShadow: {
                "neon": "0 0 10px rgb(var(--color-primary) / 0.5), 0 0 20px rgb(var(--color-primary) / 0.3)",
                "neon-green": "0 0 15px rgb(var(--color-accent-green) / 0.5), 0 0 30px rgb(var(--color-accent-green) / 0.3)",
                "neon-red": "0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3)",
                "glass": "0 8px 32px 0 rgba(0, 0, 0, 0.37)",
            },
            backgroundImage: {
                "grid-pattern": "linear-gradient(to right, #1f2937 1px, transparent 1px), linear-gradient(to bottom, #1f2937 1px, transparent 1px)",
            },
            keyframes: {
                shine: {
                    "0%": { transform: "translateX(-200%) skewX(-12deg)" },
                    "100%": { transform: "translateX(200%) skewX(-12deg)" },
                },
                shake: {
                    "0%, 100%": { transform: "translateX(0)" },
                    "25%": { transform: "translateX(-4px)" },
                    "75%": { transform: "translateX(4px)" },
                },
            },
            animation: {
                shine: "shine 1s ease-in-out infinite",
                shake: "shake 0.5s ease-in-out infinite",
            },
        },
    },
    plugins: [],
}