devolt.one/tailwind.config.js at master · devolt-one/devolt.one · 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
/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
// const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: {
    content: [
      './pages/**/*.vue',
      './layouts/**/*.vue',
      './components/**/*.vue',
      './lang/**/*.js'
    ],
    options: {
      whitelist: [
        'dark-mode',
        'ul',
        'ol',
        'li',
        'text-primary-base',
        'md:inline',
        'swiper-wrapper'
      ],
      whitelistPatternsChildren: [/service-description$/, /svg.*/, /swiper.*/]
    }
  },
  theme: {
    darkSelector: '.dark-mode',
    screens: {
      sm: '540px',
      md: '720px',
      lg: '960px',
      xl: '1140px'
    },
    extend: {
      container: {
        padding: '15px'
      },
      fontFamily: {
        sans: [
          '"Open Sans"',
          // ...defaultTheme.fontFamily.sans
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
        ],
        montserrat: [
          'Montserrat',
          // ...defaultTheme.fontFamily.sans
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
        ]
      },
      fontSize: {
        '6xl': '4rem'
      },
      colors: {
        primary: {
          base: '#C5517D'
        },
        secondary: {
          base: '#88E7C4'
        },
        dark: {
          surface: '#1a1a1a',
          darken: '#141414'
        }
      },
      boxShadow: {
        fab:
          '0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)'
      },
      spacing: {
        '05': '0.125rem',
        '18': '4.5rem',
        '22': '5.5rem'
      },
      inset: {
        '4': '1rem'
      },
      zIndex: {
        '-10': -10
      }
    },
    typography: (theme) => ({
      dark: {
        css: [
          {
            color: theme('colors.gray.300'),
            a: {
              color: theme('colors.gray.300')
            }
          }
        ]
      }
    })
  },
  variants: {
    backgroundColor: ['dark'],
    textColor: ['dark', 'responsive'],
    padding: ['responsive', 'last'],
    margin: ['responsive', 'last'],
    typography: ['dark', 'responsive']
  },
  plugins: [
    require('tailwindcss-dark-mode')(),
    require('@tailwindcss/typography')()
  ]
}