guests/tailwind.config.js at master · marccoon/guests · 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
123
124
125
module.exports = {
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    container: {
      center: true,
      padding: {},
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1360px',
    },
    fontFamily: {
      title: ['Caviar Dreams'],
      phrase: ['Caviar Dreams'],
      body: ['Open Sans'],
    },
    borderColor: (theme) => ({
      ...theme('colors'),
      select: '#C9AB81',
      btn: '#C9AB81',
    }),
    placeholderColor: (theme) => ({
      ...theme('colors'),
      select: '#C9AB81',
    }),
    textColor: (theme) => ({
      ...theme('colors'),
      select: '#C9AB81',
      'select-hover': '#fff',
      menu: '#C9AB81',
      title: '#C9AB81',
      link: '#C9AB81',
      'link-hover': '#fff',
      phrase: '#C9AB81',
      text: '#fff',
      btn: '#fff',
      'btn-hover': '#C9AB81',
      contact: '#C9AB81',
      footer: '#354951',
      card: '#fff',
      'dish-title': '#C9AB81',
      'dish-text': '#fff',
      category: '#fff',
      'category-active': '#C9AB81',
    }),
    backgroundColor: (theme) => ({
      ...theme('colors'),
      form: '#0F1D22',
      card: 'rgba(15,29,34,0.98)',
      pagination: '#C9AB81',
      contact: '#0F1D22',
      menu: '#0B1315',
      dishes: '#0F1D22',
    }),
    backgroundSize: {
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      '100%': '100%',
    },

    extend: {
      zIndex: {
        '-1': -1,
      },
      fill: {
        arrow: '#C9AB81',
        arrowHover: '#fff',
      },
      backgroundImage: () => ({
        bg: "url('~assets/img/bg-body.png')",
        index: "url('~assets/img/index-bg.png')",
        'index-menu-1': "url('~assets/img/menu-img-1.png')",
        'index-menu-2': "url('~assets/img/menu-img-2.png')",
        'about-bg': "url('~assets/img/about-bg.png')",
        'main-menu': "url('~assets/img/menu-bg-1.png')",
        line: "url('~assets/img/menu-line.svg')",
        lunch: "url('~assets/img/lunch-bg.png')",
      }),
      height: {
        128: '32rem',
        144: '36rem',
      },
      maxHeight: {
        128: '32rem',
        144: '36rem',
      },
      minWidth: {
        xxs: '13rem',
        16: '4rem',
        '1/3': '33.3333333%',
      },
      maxWidth: {
        48: '12rem',
        56: '14rem',
        64: '16rem',
        72: '18rem',
        96: '24rem',
        112: '28rem',
        128: '32rem',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwind-scrollbar-hide'),
  ],
}