디자인 적용

index.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

//폰트 적용
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

//전체 디자인 적용
.main_article {
    @apply w-full min-h-screen m-auto relative max-w-screen-md
}

//tailwind.config에서 내가 추가한 단위
.rank_tab_box {
    @apply mb-5 w-[300px]
}

@apply: 여러 클래스를 묶어서 재사용 가능

tailwind.config

//추가한 단위
const customWidthPx = {
  300: '300px',
  400: '400px',
  500: '500px',
  'custom:': '100px',
}

//테마에 추가
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      height: {
        ...customHeight,
        ...customHeightVh,
      },
      width: {
        ...customWidthPx,
      },
      backgroundColor: theme => ({
        ...theme('colors'),
        'primary': '#f3f0e8',
        'secondary': '#d4c3b3',

      }),
      borderColor: theme => ({
        ...theme('colors'),
        'primary': '#f3f0e8',
        'secondary': '#d4c3b3',

      }),
    },
  },
  plugins: [],
}