[Feat] Tailwind 초기 세팅 및 theme 세팅

[simeunseo]

관련 이슈 번호

close #63

작업 내용

• tailwindcss, postcss, autoprefixer 패키지 설치
• global.css에 색상 토큰 세팅
• tailwind theme extend에 textColor, bgColor, borderColor 추가
• tailwind theme extend에 typography 추가
• tailwind theme extend에 borderRadius 추가
• tailwind theme extend에 boxShadow 추가
• postcss.config에 nesting 플러그인 추가

PR 포인트

theme 세팅

기존 피그마 디자인이 purple-500, grey-300과 같이 색상명을 토큰으로 하여 디자인되어있었는데요!
시맨틱한 네이밍을 부여하기 위해, 다음과 같이 컬러 시스템을 새로 정의했습니다.
이를 기반으로 tailwind theme에 extend해주었습니다.

typogrphay도 마찬가지로 피그마에 정의된 시스템대로 tailwind theme에 extend해주었습니다.

borderRadius와 boxShadow도 피그마와 동일하게 세팅했습니다.

textColor 사용법

<div className="text-main">text-main</div>

bgColor 사용법

<div className="bg-primary">bg-primary</div>

borderColor 사용법

<div className="border border-main">border-main</div>

typography 사용법

<h1 className="text-head1">head1</h1>

borderRadius 사용법

<div className="rounded-base">border-radius-base</div>

boxShadow 사용법

<div className="shadow-normal p-4 bg-white">shadow-normal</div>

고민과 학습내용

Tailwind 시작하기

• tailwind를 처음 학습하고 적용하는 과정을 정리한 내용입니다.

스크린샷

[begong313]

고생하셨습니다!!