tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        system1: ['Pretendard Variable'],
        system2: ['Pretendard Variable'],
        system3: ['Pretendard Variable'],
        system4: ['Pretendard Variable'],
        system5: ['Pretendard Variable'],
        system6: ['Pretendard Variable'],
        system4_medium: ['Pretendard Variable'],
        system5_medium: ['Pretendard Variable'],
        system6_medium: ['Pretendard Variable'],
        system1_bold: ['Pretendard Variable'],
        system2_bold: ['Pretendard Variable'],
        system3_bold: ['Pretendard Variable'],
        system4_bold: ['Pretendard Variable'],
        system5_bold: ['Pretendard Variable'],
        system6_bold: ['Pretendard Variable'],
      },
      fontSize: {
        system1: ['24px', { lineHeight: '30px' }],
        system2: ['20px', { lineHeight: '26px' }],
        system3: ['18px', { lineHeight: '24px' }],
        system4: ['16px', { lineHeight: '24px' }],
        system5: ['14px', { lineHeight: '21px' }],
        system6: ['12px', { lineHeight: '18px' }],
        system4_medium: ['16px', { lineHeight: '24px' }],
        system5_medium: ['14px', { lineHeight: '21px' }],
        system6_medium: ['12px', { lineHeight: '18px' }],
        system1_bold: ['24px', { lineHeight: '31px' }],
        system2_bold: ['20px', { lineHeight: '30px' }],
        system3_bold: ['18px', { lineHeight: '27px' }],
        system4_bold: ['16px', { lineHeight: '24px' }],
        system5_bold: ['14px', { lineHeight: '21px' }],
        system6_bold: ['12px', { lineHeight: '18px' }],
      },
      fontWeight: {
        system1: ['400'],
        system2: ['400'],
        system3: ['400'],
        system4: ['400'],
        system5: ['400'],
        system6: ['400'],
        system4_medium: ['500'],
        system5_medium: ['500'],
        system6_medium: ['500'],
        system1_bold: ['700'],
        system2_bold: ['700'],
        system3_bold: ['700'],
        system4_bold: ['700'],
        system5_bold: ['700'],
        system6_bold: ['700'],
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      colors: {
        BLUE_800: '#003F9E',
        BLUE_700: '#0055D4',
        BLUE_600: '#0066FF',
        BLUE_500: '#3687FF',
        BLUE_400: '#5C9DFF',
        BLUE_300: '#97C1FF',
        BLUE_200: '#C9DEFF',
        BLUE_100: '#E0EDFF',
        BLUE_50: '#F0F6FF',
        GRAY_900: '#29303F',
        GRAY_800: '#364659',
        GRAY_600: '#576981',
        GRAY_400: '#7C8A9E',
        GRAY_300: '#9FAABA',
        GRAY_200: '#C5CBD5',
        GRAY_100: '#ECEFF5',
        GRAY_50: '#F6F6F9',
        WHTIE: '#FFFFFF',
      },
    },
  },
  plugins: [require('tailwind-scrollbar-hide')],
};