중간발표를 이틀 남기고 나는 기능 구현을 끝냈지만, 다 끝내지 못한 팀원들도 멈추고 바로 스타일링 작업에 들어갔다. 디자이너분들이 작업해주신 피그마-디자인시스템을 tailwind.config.ts파일에 세팅을 먼저 끝내고 시작했어야 좀 더 반복 작업을 덜 했을 것 같다는 생각에 조금 늦지만 검색해봤다.

📌 tailwind.config.ts파일

1. 역할

Tailwind CSS의 설정 파일로,
디자인 시스템의 색상, 폰트, 여백, 크기 등의 공통 요소를 커스터마이징하고 관리하는 데 사용된다.
디자이너가 피그마로 제공한 디자인 시스템을 이 파일에 반영하면, 코드 전반에서 일관된 스타일을 쉽게 적용할 수 있다.

2. 사용방법

• 프로젝트 루트에 tailwind.config.ts 파일이 있으며, Tailwind 기본 설정을 덮어쓴다.
• 디자이너가 제공한 색상, 폰트 사이즈, 스페이싱 등을 이곳에 정의하면 Tailwind에서 지정한 클래스 이름으로 사용할 수 있다.

3. 예시

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "var(--primary-50)",
          100: "var(--primary-100)",
          ...
        },
        secondary: {
          50: "var(--secondary-50)",
          100: "var(--secondary-100)",
          ...
        },
        gray: {
          50: "var(--gray-50)",
          100: "var(--gray-100)",
          ...
        }
      },
      borderRadius: {
        lg: "var(--border-radius-37)",
        md: "var(--border-radius-26)",
        sm: "var(--border-radius-20)"
      },
      fontSize: {
        sm: "var(--font-sm)",
        ...
      },
      fontFamily: {
        suit: "var(--font-family-suit)"
      }
    }
  },
  plugins: [safeArea, tailwindAnimate]
};
export default config;

• primary, secondary와 같은 색상(colors)이나 suit 폰트(fontFamily) 등 피그마에서 제공된 스타일 값을 지정하여 사용하면, 코드 어디에서나 일관된 디자인을 유지할 수 있다.

📌 globals.css 파일

1. 역할

전역 스타일을 정의하는 파일로,
프로젝트에 적용될 기본 스타일이나 Tailwind CSS의 기본 설정을 불러오는 역할을 하며,
Tailwind의 기본 유틸리티 클래스를 전역에 활성화하는 파일이다.

2. 사용방법

이 파일에 Tailwind의 기본 스타일을 가져오는 @tailwind 지시자를 추가하여 Tailwind의 기능을 활성화한다.

3. 예시

/* globals.css */
@tailwind base;     /* 기본 스타일 리셋 */
@tailwind components; /* Tailwind의 컴포넌트 스타일 */
@tailwind utilities;  /* 유틸리티 클래스들 */

body {
  font-family: 'suit', sans-serif; /* 피그마에서 정의된 폰트를 전역에 적용 */
}

• 이 파일을 통해 Tailwind CSS의 스타일이 모든 컴포넌트에 적용될 수 있도록 설정한다.
• @tailwind base는 Tailwind의 기본 스타일을, @tailwind components는 기본 컴포넌트 스타일을,
  그리고 @tailwind utilities는 유틸리티 클래스들을 사용할 수 있게 해 준다.

요약

tailwind.config.ts파일: 디자인 시스템의 색상, 폰트, 여백 등 공통 요소를 설정하여 프로젝트 전반에 적용
globals.css파일: 전역 스타일 및 Tailwind CSS 유틸리티 클래스 적용
=> 이 두 파일을 잘 설정하면, 피그마 디자인 시스템에 맞춘 일관된 스타일을 손쉽게 유지할 수 있다.