ymeets/tailwind.config.js at main · YaleComputerSociety/ymeets · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class", // This is essential
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        'scale-in': {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' }
        },
        'shimmer': {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' }
        },
        'slide-up': {
          '0%': { opacity: '0', transform: 'translateY(30px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        },
        'slide-in-right': {
          '0%': { opacity: '0', transform: 'translateX(30px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' }
        },
        'float': {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-10px)' }
        }
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out',
        'scale-in': 'scale-in 0.2s ease-out',
        'shimmer': 'shimmer 1.5s infinite',
        'slide-up': 'slide-up 0.6s ease-out forwards',
        'slide-up-delay-1': 'slide-up 0.6s ease-out 0.1s forwards',
        'slide-up-delay-2': 'slide-up 0.6s ease-out 0.2s forwards',
        'slide-up-delay-3': 'slide-up 0.6s ease-out 0.3s forwards',
        'slide-in-right': 'slide-in-right 0.6s ease-out forwards',
        'float': 'float 3s ease-in-out infinite'
      },
      fontFamily: {
        sans: ["Funnel Display", ...defaultTheme.fontFamily.sans],
        display: ["Funnel Display", ...defaultTheme.fontFamily.sans],
      },
      boxShadow: {
        custom: "2px 4px 3px 0px rgba(0, 0, 0, 0.4)",
      },
      colors: {
        background: "#e1e8f7", // Light mode background
        secondary_background: "#ffffff", // Light mode secondary background
        text: "#000000", // Light mode text color
        outline: "#7E7E7E", // Light mode outline
        primary: "#5191F2", // Light mode primary color
        secondary: "#609CF6", // Light mode secondary color
        select: "#afcdfa", // Light mode select color
        submit: "#73dd64", // Light mode submit button color

        // Dark mode colors
        "background-dark": "#1a202c", // Dark mode background
        "secondary_background-dark": "#2d3748", // Dark mode secondary background
        "text-dark": "#f8f9fa", // Dark mode text color
        "primary-dark": "#90cdf4", // Dark mode primary color
        "secondary-dark": "#609CF6", // Dark mode secondary color (same as light)
        "select-dark": "#afcdfa", // Dark mode select color (same as light)
        "submit-dark": "#73dd64", // Dark mode submit button color (same as light)
      },

      height: {
        nineteen: "70px",
        17: "66px",
        29: "120px",
      },
      maxHeight: {
        120: "28rem",
        125: "30rem",
        130: "32rem",
        135: "34rem",
        140: "36rem",
      },
      scale: {
        102: "1.02",
      },
      width: {
        "20vw": "30vw",
        "40vw": "40vw", // add 40vw if you need it for toggling
      },
    },
  },
  safelist: [
    {
      pattern: /grid-cols-.|bg-.|border-.*/,
    },
  ],
  fontFamily: {
    roboto: ["Roboto", "sans-serif"],
  },
  variants: {
    fill: ["hover", "focus"],
  },
  plugins: [require("tailwind-scrollbar")],
};