Tailwind

Tailwind 디자인 토큰

Tailwind 설정, 사용 예시, 장점과 고려사항을 Next.js 컴포넌트 작성 흐름에 맞춰 정리합니다.

빠른 작성

HTML 가까운 스타일

className에서 spacing, color, layout을 바로 조합해 반복 CSS 파일을 줄입니다.

일관성

토큰 기반 조합

정해진 스케일을 쓰면 화면 사이의 간격과 색상이 맞기 쉽습니다.

긴 className 관리

긴 className 관리

복잡한 조건부 스타일은 컴포넌트 분리나 유틸리티 함수를 함께 사용합니다.

Tailwind 적용 판단

속도와 가독성의 균형 결정

Tailwind는 빠르지만 className이 길어질 수 있으므로 반복 패턴과 디자인 토큰을 어떻게 관리할지 합의해야 합니다.

Tailwind 적용 경계

설정콘텐츠 경로와 전역 CSS import가 맞는지 확인합니다.
조합반복되는 UI는 컴포넌트로 추출해 className 중복을 줄입니다.
품질반응형, 접근성, 다크 모드 기준을 유틸리티 조합에 반영합니다.