email-client-desktop/tailwind.config.js at master · ynnelson/email-client-desktop · 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
116
117
118
119
120
121
122
const colors = require('tailwindcss/colors');

const theme = {
  cursor: {
    help: 'help'
  },
  colors: {
    transparent: 'transparent',
    current: 'currentColor',
    blueGray: colors.blueGray,
    coolGray: colors.coolGray,
    black: colors.black,
    white: colors.white,
    gray: colors.trueGray,
    warmGray: colors.warmGray,
    trueGray: colors.trueGray,
    red: colors.red,
    yellow: colors.amber,
    orange: colors.orange,
    green: colors.green,
    emerald: colors.emerald,
    teal: colors.teal,
    cyan: colors.cyan,
    blue: colors.blue,
    sky: colors.sky,
    indigo: colors.indigo,
    purple: colors.purple,
    violet: colors.violet,
    pink: colors.pink,
    rose: colors.rose,
    fuchsia: colors.fuchsia
  },
  // Should switch all em units to pixel for a better system.
  fontSize: {
    '2xs': '10px',
    xs: '12px',
    sm: '14px',
    tiny: '16px',
    base: '18px',
    lg: '20px',
    xl: '24px',
    '2xl': '32px',
    '3xl': '48px',
    '4xl': '80px'
  },
  extend: {
    // fontSize: {
    //   '2xs': '.70rem'
    // },
    scale: {
      '0': '0',
      '25': '.25',
      '50': '.5',
      '75': '.75',
      '90': '.9',
      '95': '.95',
      '100': '1',
      '105': '1.05',
      '110': '1.1',
      '125': '1.25',
      '150': '1.5',
      '200': '2'
    },
    colors: {
      darkPurple: '#0F061E'
    },
    height: {
      '13': '3.125rem',
      navIconBorder: '2.83rem'
    },
    minHeight: {
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem'
    },
    maxHeight: {
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem'
    },
    minWidth: {
      '48': '12rem',
      '1/6': '16.666667%',
      '2/6': '33.333333%',
      '3/12': '25%'
    },
    width: {
      '13': '3.125rem',
      navIconBorder: '2.83rem'
    },
    padding: {
      '05': '0.125rem'
    },
    borderRadius: {
      xl: '1rem'
    },
    borderWidth: {
      '3': '3px'
    }
  },
  fontFamily: {
    body: ['Montserrat'],
    display: ['Montserrat']
  }
};
const variants = {
  extend: {
    opacity: ['disabled'],
    boxShadow: ['responsive', 'hover', 'focus', 'active'],
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    visibility: ['responsive', 'hover', 'focus', 'group-hover']
  }
};
const plugins = [require('@tailwindcss/line-clamp')];

module.exports = {
  darkMode: 'class',
  important: true,
  theme,
  variants,
  plugins
};