portfolio/tailwind.config.js at main · Jayesh049/portfolio · 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
54
55
56
57
58
59
60
61
62
63
64
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx}",
  './components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}'
],
  mode: "jit",
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Plus Jakarta Sans"', "Poppins", "system-ui", "sans-serif"],
        display: ['"Clash Display"', '"Plus Jakarta Sans"', "sans-serif"],
        serif: ["Lora", "Georgia", "serif"],
      },
      colors: {
        primary: "#04040c",
        secondary: "#b8b3d1",
        tertiary: "#1a0f35",
        "black-100": "#120a28",
        "black-200": "#0a0518",
        "white-100": "#f3f3f3",
        accent: "#a855f7",
        "accent-hot": "#c084fc",
        neon: "#22d3ee",
        "neon-pink": "#f472b6",
      },
      boxShadow: {
        card: "0px 35px 120px -15px rgba(145, 94, 255, 0.25)",
        glow: "0 0 100px -15px rgba(168, 85, 247, 0.65)",
        "glow-sm": "0 0 32px -6px rgba(168, 85, 247, 0.55)",
        "glow-cyan": "0 0 45px -8px rgba(34, 211, 238, 0.45)",
      },
      backgroundImage: {
        "hero-pattern": "url('/src/assets/herobg.png')",
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        shimmer:
          "linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.12) 45%, transparent 90%)",
      },
      keyframes: {
        marquee: {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-50%)" },
        },
        "gradient-x": {
          "0%, 100%": { backgroundPosition: "0% 50%" },
          "50%": { backgroundPosition: "100% 50%" },
        },
        floaty: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-6px)" },
        },
      },
      animation: {
        marquee: "marquee 38s linear infinite",
        "gradient-x": "gradient-x 8s ease infinite",
        floaty: "floaty 5s ease-in-out infinite",
      },
      screens: {
        xs: "450px",
      },
    },
  },
  plugins: [],
};