conduitio.github.io/tailwind.config.ts at main · ConduitIO/conduitio.github.io · 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
107
108
109
110
111
112
113
114
115
import type { Config } from 'tailwindcss'
import colors from "tailwindcss/colors";

const config: Config = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        inter: [
          'Inter',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
      colors: {
        // Tailwind Colors
        gray: colors.gray,
        teal: colors.teal,
        red: colors.red,
        yellow: colors.yellow,
        cyan: colors.cyan,
        purple: colors.purple,
        // Custom Meroxa colors
        slate: {
          5: '#F5F5F5',
          20: '#D6D7D9',
          40: '#A5A7AB',
          60: '#85878D',
          100: '#111827',
          'dark': '#282D39'
        },

        forest: {
          5: '#F2F7F7',
          20: '#CEDFE2',
          40: '#B6CBCE',
          60: '#6C9EA7',
          100: '#134E4A'
        },

        sky: {
          5: '#F4FBFD',
          20: '#D2F2F7',
          40: '#BCECF4',
          60: '#79D8E8',
          100: '#06B6D4'
        },

        canary: {
          5: '#FEFCF5',
          20: '#FCF3D8',
          40: '#FAEEC5',
          60: '#F5DC8B',
          100: '#FBBF24'
        },

        saffron: {
          5: '#FDF6F5',
          20: '#F8DED8',
          40: '#F5CDC5',
          60: '#EB9B8B',
          100: '#DC2626'
        },

        plum: {
          5: '#FAF5FD',
          20: '#EBD8F8',
          40: '#E1C5F4',
          60: '#C48AE9',
          100: '#9333EA'
        },

        frost: {
          20: '#FBFBFB',
          40: '#F0F1F5',
          60: '#E9EBEF',
          100: '#6B7280'
        },

        verdant: {
          100: '#0F766E'
        },

        white: '#FFFFFF',
        black: '#000000',
        transparent: 'transparent'
      },
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
  safelist: [
    // include classes used in footer
    'text-black',
    'text-gray-600',
    'flex',
    'mt-6',
    'ml-4',
  ],
};

export default config;