KDS-Front-End/tailwind.config.js at dev · Hello-Kitchen/KDS-Front-End · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      height: {
        'lh': '5%',
        'lf': '10%',
        'lb': '85%',
        'pos-button': '11%',
      },
      writingMode: {
        'tb-rl': 'vertical-rl',
      },
      rotate: {
        '-180': '-180deg',
      },
      width: {
        'etat': '4%'
      },
      fontSize: {
        '24px': '24px',
        '20px': '20px',
        'etat': '12px'
      },
      colors: {
        'kitchen-blue': '#499CA6',
        'kitchen-yellow': '#F2E5A2',
        'kitchen-green': '#62B73A',
        'kitchen-orange': '#F2762E',
        'kitchen-green': '#62B73A',
        'kitchen-red': '#D91604',
        'kitchen-beige': '#D98282',
        'select-orange': '#FF9900'
      },
      boxShadow: {
        'inner-top-lg': 'inset 0 5px 5px rgba(0, 0, 0, 0.3)',
        'inner-right-lg': 'inset -5px 0 5px rgba(0, 0, 0, 0.3)',
      },
    },
  },
  /**
   * Safelist is used to force the colors to be in the final css file to be used in dynamic classes
   */
  safelist: [
    'text-kitchen-green',
    'text-kitchen-red',
    'text-kitchen-blue',
    'bg-kitchen-green',
    'bg-kitchen-red',
    'bg-kitchen-blue',
  ],
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.writing-mode-tb-rl': {
          writingMode: 'vertical-rl',
        },
        '.rotate-180': {
          transform: 'rotate(-180deg)',
        },
        '.border-l-2': {
          borderLeftWidth: '10px',
        },
        '.border-l': {
          borderLeftColor: 'kitchen-blue',
        },
        '.box-border': {
          boxSizing: 'border-box',
        },
      });
    },
  ],
}