tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      sans: [
        'Pretendard Variable',
        'Pretendard',
        '-apple-system',
        'BlinkMacSystemFont',
        'system-ui',
        'Roboto',
        'Helvetica Neue',
        'Segoe UI',
        'Apple SD Gothic Neo',
        'Noto Sans KR',
        'Malgun Gothic',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'sans-serif',
      ],
    },
    extend: {
      colors: {
        'pekora-blue': {
          50: 'hsl(214, 100%, 97%)',
          100: 'hsl(212, 100%, 93%)',
          200: 'hsl(212, 100%, 84%)',
          300: 'hsl(210, 100%, 78%)',
          400: 'hsl(211, 96%, 68%)',
          500: 'hsl(215, 94%, 60%)',
          600: 'hsl(219, 86%, 53%)',
          700: 'hsl(222, 79%, 48%)',
          800: 'hsl(224, 73%, 40%)',
          900: 'hsl(223, 67%, 33%)',
          950: 'hsl(225, 59%, 21%)',
        },
        'pekora-hair': {
          50: 'hsl(222, 76%, 97%)',
          100: 'hsl(219, 74%, 94%)',
          200: 'hsl(222, 72%, 89%)',
          300: 'hsl(223, 71%, 82%)',
          400: 'hsl(227, 68%, 74%)',
          500: 'hsl(232, 64%, 67%)',
          600: 'hsl(237, 57%, 59%)',
          700: 'hsl(238, 44%, 51%)',
          800: 'hsl(237, 41%, 41%)',
          900: 'hsl(235, 36%, 34%)',
          950: 'hsl(237, 35%, 20%)',
        },
        'pekora-carrot': {
          50: 'hsl(33, 100%, 96%)',
          100: 'hsl(36, 100%, 92%)',
          200: 'hsl(34, 95%, 83%)',
          300: 'hsl(32, 94%, 72%)',
          400: 'hsl(28, 94%, 62%)',
          500: 'hsl(26, 92%, 53%)',
          600: 'hsl(22, 89%, 48%)',
          700: 'hsl(19, 86%, 40%)',
          800: 'hsl(16, 77%, 34%)',
          900: 'hsl(17, 73%, 28%)',
          950: 'hsl(13, 78%, 15%)',
        },
        'pekora-body': {
          50: 'hsl(30, 17%, 95%)',
          100: 'hsl(27, 18%, 88%)',
          200: 'hsl(25, 19%, 77%)',
          300: 'hsl(23, 18%, 64%)',
          400: 'hsl(21, 17%, 55%)',
          500: 'hsl(19, 17%, 47%)',
          600: 'hsl(13, 17%, 40%)',
          700: 'hsl(9, 17%, 33%)',
          800: 'hsl(6, 14%, 29%)',
          900: 'hsl(0, 13%, 26%)',
          950: 'hsl(0, 14%, 14%)',
        },
      },
      gridTemplateColumns: {
        'auto-fit-w-72': 'repeat(auto-fit, minmax(18rem, 1fr))',
      },
    },
  },
  plugins: [],
}