12th-FinSight-FE/tailwind.config.ts at develop · IT-Cotato/12th-FinSight-FE · 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
import type { Config } from "tailwindcss";

const config: Config = {
    content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			'bg-100': 'var(--color-bg-100, #131416)',
  			'bg-90': 'var(--color-bg-90, #171E26)',
  			'bg-80': 'var(--color-bg-80, #1D2937)',
  			'bg-70': 'var(--color-bg-70, #2F3847)',
  			'bg-60': 'var(--color-bg-60, #3D4655)',
  			'bg-50': 'var(--color-bg-50, #4D5464)',
  			'bg-40': 'var(--color-bg-40, #8E99AD)',
  			'bg-30': 'var(--color-bg-30, #B5BDC9)',
  			'bg-20': 'var(--color-bg-20, #D5D9E4)',
  			'bg-10': 'var(--color-bg-10, #EAEFF5)',
  			'gray-100': 'var(--color-gray-100, #171717)',
  			'gray-90': 'var(--color-gray-90, #373737)',
  			'gray-80': 'var(--color-gray-80, #555)',
  			'gray-70': 'var(--color-gray-70, #696969)',
  			'gray-60': 'var(--color-gray-60, #909090)',
  			'gray-50': 'var(--color-gray-50, #B1B1B1)',
  			'gray-40': 'var(--color-gray-40, #D5D5D5)',
  			'gray-30': 'var(--color-gray-30, #E6E6E6)',
  			'gray-20': 'var(--color-gray-20, #F0F0F0)',
  			'gray-10': 'var(--color-gray-10, #F8F8F8)',
  			'primary-100': 'var(--color-primary-100, #151540)',
  			'primary-90': 'var(--color-primary-90, #2A2970)',
  			'primary-80': 'var(--color-primary-80, #35328F)',
  			'primary-70': 'var(--color-primary-70, #433DB4)',
  			'primary-60': 'var(--color-primary-60, #5148D5)',
  			'primary-50': 'var(--color-primary-50, #5C54F5)',
  			'primary-40': 'var(--color-primary-40, #7770F7)',
  			'primary-30': 'var(--color-primary-30, #9C95FA)',
  			'primary-20': 'var(--color-primary-20, #C5BBFB)',
  			'primary-10': 'var(--color-primary-10, #ECE7FD)',
		},
  		fontFamily: { sans: ['Pretendard', 'sans-serif']},
  		fontSize: {
  			h1: ['25px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '700' }],
  			h2: ['22px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '700' }],
  			h3: ['20px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '700' }],
  			h4: ['18px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '700' }],
  			sh1: ['25px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
  			sh2: ['22px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
  			sh3: ['20px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
  			sh4: ['18px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
  			sh5: ['15px', { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '600' }],
  			b1: ['16px', { lineHeight: '1.8', letterSpacing: '-0.01em' }],
  			b2: ['14px', { lineHeight: '1.8', letterSpacing: '-0.01em' }],
  			b3: ['13px', { lineHeight: '1.8', letterSpacing: '-0.01em' }],
  			b4: ['12px', { lineHeight: '1.8', letterSpacing: '-0.01em' }],
  			b5: ['10px', { lineHeight: '1.8', letterSpacing: '-0.01em' }],
  		},
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;