tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/entities/**/*.{js,ts,jsx,tsx,mdx}',
    './src/views/**/*.{js,ts,jsx,tsx,mdx}',
    './src/widgets/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/shared/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        gray: {
          '100': 'var(--color-gray-100)',
          '200': 'var(--color-gray-200)',
          '300': 'var(--color-gray-300)',
          '400': 'var(--color-gray-400)',
          '500': 'var(--color-gray-500)',
          '600': 'var(--color-gray-600)',
          '700': 'var(--color-gray-700)',
          '800': 'var(--color-gray-800)',
          '900': 'var(--color-gray-900)',
        },
        main: {
          '100': 'var(--color-main-100)',
          '200': 'var(--color-main-200)',
          '300': 'var(--color-main-300)',
          '400': 'var(--color-main-400)',
          '500': 'var(--color-main-500)',
          '600': 'var(--color-main-600)',
        },
        transparent: 'transparent',
        black: 'var(--color-black)',
        white: 'var(--color-white)',
        error: 'var(--color-error)',
      },
      fontFamily: {
        Pretendard: ['Pretendard'],
      },
      fontSize: {
        h1: ['1.875rem', { lineHeight: '2.25rem', fontWeight: '500' }],
        h2: ['1.5rem', { lineHeight: '1.8rem', fontWeight: '600' }],
        h3: ['1.5rem', { lineHeight: '1.8rem', fontWeight: '400' }],
        h4: ['1.25rem', { lineHeight: '1.5rem', fontWeight: '600' }],
        h5: ['1.25rem', { lineHeight: '1.5rem', fontWeight: '400' }],
        body1: ['1.125rem', { lineHeight: '1.35rem', fontWeight: '600' }],
        body2: ['1.125rem', { lineHeight: '1.35rem', fontWeight: '400' }],
        body3: ['1rem', { lineHeight: '1.4rem', fontWeight: '600' }],
        body4: ['1rem', { lineHeight: '1.4rem', fontWeight: '400' }],
        caption1: ['0.875rem', { lineHeight: '1.225rem', fontWeight: '600' }],
        caption2: ['0.875rem', { lineHeight: '1.225rem', fontWeight: '400' }],
        caption3: ['0.75rem', { lineHeight: '1.125rem', fontWeight: '600' }],
        caption4: ['0.75rem', { lineHeight: '1.125rem', fontWeight: '400' }],
      },
      spacing: {
        '0': '0',
        px: '1px',
        '2': '2px',
        '4': '4px',
        '6': '6px',
        '8': '8px',
        '10': '10px',
        '12': '12px',
        '14': '14px',
        '16': '16px',
        '18': '18px',
        '20': '20px',
        '22': '22px',
        '24': '24px',
        '26': '26px',
        '28': '28px',
        '30': '30px',
        '32': '32px',
        '34': '34px',
        '36': '36px',
        '38': '38px',
        '40': '40px',
        '42': '42px',
        '44': '44px',
        '46': '46px',
        '48': '48px',
        '50': '50px',
        '52': '52px',
        '54': '54px',
        '56': '56px',
        '58': '58px',
        '60': '60px',
        '62': '62px',
        '64': '64px',
        '66': '66px',
        '68': '68px',
        '70': '70px',
        '72': '72px',
        '74': '74px',
        '76': '76px',
        '78': '78px',
        '80': '80px',
        '82': '82px',
        '84': '84px',
        '86': '86px',
        '88': '88px',
        '90': '90px',
        '92': '92px',
        '94': '94px',
        '96': '96px',
        '98': '98px',
        '100': '100px',
      },
      borderRadius: {
        none: '0',
        sm: '0.375rem', // 6px
        md: '0.5rem', // 8px
        lg: '0.75rem', // 12px
        xl: '1rem', // 16px
        '2xl': '1.5rem', // 24px
        '3xl': '2rem', // 32px
        full: '9999px', // 완전한 원형
      },
      borderWidth: {
        '1': '0.0625rem',
      },
      opacity: {
        '0': '0',
        '20': '0.2',
        '40': '0.4',
        '60': '0.6',
        '80': '0.8',
        '100': '1',
      },
    },
    screens: {
      mobile: { max: '640px' },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

export default config;