Next.js 프로젝트에서 Tailwind CSS가 많이 권장되는 데는 여러 이유가 있다.
1. 자동으로 적용되는 Reset CSS
Tailwind CSS는 기본적으로 브라우저 간의 일관된 스타일링을 위한 Reset CSS(또는 Normalize CSS)를 포함하고 있다. 이는 별도의 설정 없이도 모든 브라우저에서 동일한 기본 스타일링을 제공하여 개발자의 부담을 줄여준다.
2. Zero-Runtime 스타일시트
Tailwind CSS는 "유틸리티 우선" 접근 방식을 사용하며, 빌드 시점에 사용된 클래스만 포함하는 최적화된 CSS를 생성한다. 이는 다음과 같은 이점을 제공한다:
- 런타임에 JavaScript로 스타일을 계산하지 않아 성능이 향상된다.
- 빌드 단계에서 사용하지 않는 스타일은 제거되어 최종 CSS 파일 크기가 작아진다.
- 별도의 설정 없이도 빌드 프로세스에 통합된다.
3. 레이아웃 시프트 방지
JavaScript 기반 스타일링 라이브러리(예: styled-components, emotion)는 클라이언트 사이드에서 스타일을 적용하는 과정에서 레이아웃 시프트를 발생시킬 수 있다. 페이지가 로드되면:
- HTML과 기본 CSS가 먼저 로드된다.
- JavaScript가 로드되고 실행된다.
- JavaScript 기반 스타일이 적용된다.
이 과정에서 스타일 적용 전후로 레이아웃이 변경될 수 있다. 반면, Tailwind CSS는 빌드 시점에 생성된 정적 CSS 파일을 사용하므로 이러한 문제가 발생하지 않는다.
4. 생산성 향상
클래스 이름을 고민할 필요 없이 미리 정의된 유틸리티 클래스를 사용하여 빠르게 UI를 구축할 수 있다. 또한 Next.js와의 통합이 원활하여 설정이 간단하다.
결론
- Tailwind CSS는 Reset CSS 자동 적용, Zero-Runtime 스타일시트, 레이아웃 시프트 방지, 그리고 생산성 향상 등의 이유로 Next.js 프로젝트에서 많이 사용되고 있다.
- 이러한 기술적 선택들은 결국 더 나은 사용자 경험과 개발 효율성을 제공하는 데 기여한다.
