jobs.devict/tailwind.config.js at main · devict/jobs.devict · 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
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        orange: {
          '100': '#FFF7F2',
          '200': '#FDE1CD',
          '300': '#FCCBA9',
          '400': '#F6A165',
          '500': '#EB7E32',
          '600': '#DB610B',
          '700': '#C45404',
          '800': '#A74702',
          '900': '#873800',
        },
        yellow: {
          '100': '#FFFDF2',
          '200': '#FFFBCA',
          '300': '#FFF9A2',
          '400': '#FFEE56',
          '500': '#FFE11A',
          '600': '#EACB00',
          '700': '#CEB300',
          '800': '#AC9500',
          '900': '#877500',
        },
        teal: {
          '100': '#F2FFFC',
          '200': '#D0F9EF',
          '300': '#B0F3E3',
          '400': '#71E5C9',
          '500': '#42D1AE',
          '600': '#25B390',
          '700': '#1F8A70',
          '800': '#0B634E',
          '900': '#00382A',
        },
        blue: {
          '100': '#F2FBFF',
          '200': '#C6EAF8',
          '300': '#9CDAF0',
          '400': '#56BFE4',
          '500': '#23A6D3',
          '600': '#038FBD',
          '700': '#0079A1',
          '800': '#005F7E',
          '900': '#004358',
        },
      },
    },
    customForms: theme => ({
      default: {
        'input, textarea, select, multiselect, checkbox, radio': {
          borderWidth: theme('borderWidth.2'),
          lineHeight: theme('lineHeight.tight'),
          '&:focus': {
            boxShadow: theme('boxShadow.default'),
            borderColor: theme('colors.orange.500'),
          },
          '&:disabled': {
            backgroundColor: theme('colors.orange.300'),
            borderColor: theme('colors.orange.400'),
            color: theme('colors.orange.500'),
            cursor: 'not-allowed',
          },
        },
        'input, textarea, select, multiselect': {
          width: theme('width.full'),
        },
        textarea: {
          lineHeight: theme('lineHeight.normal'),
        },
        'checkbox, radio': {
          borderColor: theme('colors.gray.400'),
        },
      },
    }),
  },
  variants: {
    opacity: ['responsive', 'hover', 'focus', 'group-hover'],
    borderWidth: ['responsive', 'last'],
  },
  plugins: [require('@tailwindcss/custom-forms')],
}