index.css

• pull 받으신 후 @theme에 노란 줄 뜨는 것은 무시해주세요.

  

• tailwindcss가 v4로 업데이트 되면서 기존 javaScript 기반 설정 파일(tailwind.config.js) 대신 **CSS에서 직접 설정**할 수 있도록 변경되었기 때문에 제대로 작성된게 맞습니다. ✅

  • 공식 문서 참고: https://tailwindcss.com/docs/theme

@import url('<https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap>');
@import 'tailwindcss';

@theme {
  /* 폰트체 */
  --font-noto-sans-kr: 'Noto Sans KR', sans-serif;

  /* 색상 */
  --color-black: #333333;
  --color-white: #ffffff;

  --color-pink-700: #e6007e;
  --color-pink-500: #ffadb5;
  --color-pink-400: #ffcece;
  --color-pink-300: #ffe3ec;
  --color-pink-200: #fffafe;

  --color-gray-700: #6b6b6b;
  --color-gray-500: #d9dadb;
  --color-gray-400: #e9e8e8;
  --color-gray-200: #f8f8f8;

  --color-peach-400: #ffd3b6;
  --color-peach-300: #fff1e6;
  --color-peach-200: #f9f7f5;

  --color-mint-700: #54ddca;
  --color-mint-400: #a8e6cf;
  --color-mint-200: #f5fdef;

  --color-purple-700: #a34eef;
  --color-purple-400: #e0beff;
  --color-purple-200: #f5edff;

  /* 스페이싱 */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
}

@layer utilities {
  /* 폰트 굵기 */
  .font-300 {
    font-weight: 300;
  }
  .font-500 {
    font-weight: 500;
  }
  .font-700 {
    font-weight: 700;
  }

  /* 데스크탑 폰트 크기 및 줄 간격 */
  .heading-1 {
    font-size: 36px;
    line-height: 56px;
  }
  .heading-2 {
    font-size: 24px;
    line-height: 35px;
  }
  .heading-3 {
    font-size: 20px;
    line-height: 26px;
  }
  .body-large {
    font-size: 16px;
    line-height: 20px;
  }
  .body-medium {
    font-size: 14px;
    line-height: 16px;
  }
  .body-small {
    font-size: 12px;
    line-height: 8px;
  }

  /* 모바일 폰트 크기 및 줄 간격 */
  .m-heading-1 {
    font-size: 32px;
    line-height: 38px;
  }
  .m-heading-2 {
    font-size: 26px;
    line-height: 30px;
  }
  .m-heading-3 {
    font-size: 20px;
    line-height: 26px;
  }
  .m-body-large {
    font-size: 16px;
    line-height: 22px;
  }
  .m-body-medium {
    font-size: 14px;
    line-height: 18px;
  }
  .m-body-small {
    font-size: 13px;
    line-height: 16px;
  }
  .m-body-add {
    font-size: 11px;
    line-height: 14px;
  }
}

* {
  box-sizing: border-box;
  font-family: var(--font-noto-sans-kr);
}

html,
body,
#root {
  background-color: var(--color-gray-200);
  height: 100%;
}

색상 적용

<div className="text-pink-700 bg-black">텍스트</div> -> 텍스트 pink-700, 배경 black 적용
<div className="border border-gray-700">텍스트</div> -> 테두리, 색상은 gray-700 적용

타이포 적용

/* [폰트 크기 및 줄 간격]과 [폰트 굵기]는 나눠서 적용 */
<div className="heading-1 font-700">텍스트</div>
<div className="m-body-large">텍스트</div> -> 적용안하게 되면 폰트 굵기는 400임을 유의

스페이싱 적용

<div className="m-xs">텍스트</div> -> 위/아래/왼쪽/오른쪽 마진 xs(8px) 적용
<div className="py-md">텍스트</div> -> 위/아래 패딩 md(24px) 적용
<div className="flex gap-lg">텍스트</div> -> flex 적용 후, gap lg(32px) 적용

이외에는 공식 문서의 Docs 페이지 참고

https://tailwindcss.com/