slim-extension/tailwind.config.js at main · CodecCods/slim-extension · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      flexGrow: {
        2: '2',
        3: '3',
      },
      colors: {
        'gray-navbar': '#f8f9fc',
        'gray-blue': {
          25: '#FCFCFD',
          100: '#EAECF5',
          800: '#293056',
        },
        'gray-lightest': '#f9fafb',
        'gray-subheader': '#98A2B3',
        'gray-background': '#F2F4F7',
        secondary: '#333F53',
        'yt-card': '#293056',
        'primary-btn': {
          100: '#D8B4FE',
          200: '#C084F5',
          300: '#A855F7',
          400: '#9333EA',
          500: '#7F56D9', // Base Color
          600: '#6B21A8',
        },
      },
      fontFamily: {
        inter: ['inter', 'sans-serif'], // Add Inter font
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.scrollbar-thin': {
          scrollbarWidth: 'thin',
          scrollbarColor: '#D0D5DD #F9FAFB',
        },
        '.scrollbar-webkit': {
          '&::-webkit-scrollbar': {
            width: '6px',
          },
          '&::-webkit-scrollbar-track': {
            backgroundColor: '#D0D5DD',
            marginTop: '5px',
          },
          '&::-webkit-scrollbar-thumb': {
            backgroundColor: '#F9FAFB',
            borderRadius: '100vw',
            width: '6px',
          },
        },
      };

      addUtilities(newUtilities, ['responsive', 'hover']);
    },
  ],
};