Fullstack-Web-Javascript/tailwind.config.js at development · WeFly-Team/Fullstack-Web-Javascript · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    screens: {
      xs: '360px',
      // => @media (min-width: 360px) { ... }
      sm: '640px',
      // => @media (min-width: 640px) { ... }
      md: '768px',
      // => @media (min-width: 768px) { ... }
      lg: '1024px',
      xl: '1280px',
      '2xl': '1440px',
      // => @media (min-width: 14440px) { ... }
    },
    extend: {
      colors: {
        neutral: {
          '01': 'rgb(255, 255, 255)',
          '02': 'rgb(245, 245, 245)',
          '03': 'rgb(237, 237, 237)',
          '04': 'rgb(224, 224, 224)',
          '05': 'rgb(194, 194, 194)',
          '06': 'rgb(158, 158, 158)',
          '07': 'rgb(117, 117, 117)',
          '08': 'rgb(80, 80, 80)',
          '09': 'rgb(28, 28, 30)',
        },
        primary: {
          blue: 'rgb(62, 123, 250)',
          darkBlue: 'rgb(48, 64, 220)',
          brightBlue: 'rgb(58, 66, 255)',
          lightBlue: 'rgb(177, 197, 255)',
          violet: 'rgb(85, 50, 133)',
          darkViolet: 'rgb(54, 23, 94)',
          brightViolet: 'rgb(123, 82, 171)',
          lightViolet: 'rgb(62, 123, 250)',
        },
        secondary: {
          danger: 'rgb(203, 58, 49)',
          warning: 'rgb(241, 160, 37)',
          success: 'rgb(24, 175, 94)',
          star: 'rgb(255, 212, 58)',
        },
        tint: {
          black: 'rgba(0, 0, 0, 0.5)',
          red: 'rgba(203, 58, 49, 0.1)',
        },
      },
      boxShadow: {
        '01': '0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08)',
        '02': '0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04)',
        '03': '0px 4px 8px 0px rgba(96, 97, 112, 0.16), 0px 0px 2px 0px rgba(40, 41, 61, 0.04)',
        '04': '0px 8px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 4px 0px rgba(40, 41, 61, 0.04)',
        '05': '0px 16px 24px 0px rgba(96, 97, 112, 0.16), 0px 2px 8px 0px rgba(40, 41, 61, 0.04)',
        '06': '0px 20px 32px 0px rgba(96, 97, 112, 0.24), 0px 2px 8px 0px rgba(40, 41, 61, 0.08)',
        card: '0 4px 4px 0 rgba(0,0,0,0.25)',
      },
    },
    fontFamily: {
      sans: ['Open Sans', 'sans-serif'],
    },
  },
  plugins: [],
};