dataskop-recommender-simulator/tailwind.config.js at main · algorithmwatch/dataskop-recommender-simulator · 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
const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui'],
      },
      colors: {
        gray: colors.trueGray,
        blue: {
          100: '#dde1f3',
          200: '#bbc3e7',
          300: '#99a5db',
          400: '#7786cf',
          500: '#5568c3',
          600: '#3d51ad',
          700: '#31418b',
          800: '#253169',
          900: '#202b5c',
          1000: '#1c254f',
          1100: '#171f42',
          1200: '#131935',
          1300: '#0e1227',
          1400: '#090c1a',
          1500: '#05060d',
        },
        red: {
          100: '#fce0e0',
          200: '#f9c0c2',
          300: '#f5a1a3',
          400: '#f28284',
          500: '#ef6366',
          600: '#ec4347',
          700: '#e82428',
          800: '#d4161a',
          900: '#ba1317',
          1000: '#9f1114',
          1100: '#850e10',
          1200: '#6a0b0d',
          1300: '#50080a',
          1400: '#350607',
          1500: '#1b0303',
        },
        green: {
          100: '#ebf4f2',
          200: '#d6e9e5',
          300: '#c2ded8',
          400: '#add4cb',
          500: '#99c9bd',
          600: '#84beb0',
          700: '#70b3a3',
          800: '#5ba896',
          900: '#4f9484',
          1000: '#437f71',
          1100: '#386a5e',
          1200: '#2d554b',
          1300: '#223f38',
          1400: '#162a26',
          1500: '#0b1513',
        },
        yellow: {
          100: '#fff9de',
          200: '#fff4bd',
          300: '#ffee9c',
          400: '#ffe87b',
          500: '#ffe35a',
          600: '#ffdd39',
          700: '#ffd818',
          800: '#f6cc00',
          900: '#d7b300',
          1000: '#b99900',
          1100: '#9a8000',
          1200: '#7b6600',
          1300: '#5c4d00',
          1400: '#3e3300',
          1500: '#1f1a00',
        },
      },
      boxShadow: {
        hard: '2px 2px 0 0 rgba(0, 0, 0, 0.69)',
      },
    },
  },
  variants: {
    extend: {
      opacity: ['disabled'],
      boxShadow: ['active'],
      pointerEvents: ['disabled'],
    },
  },
  plugins: [],
};