Next.js 개발자가 Tailwind CSS를 사용하는 이유

 

Next.js 프로젝트를 init하면 Tailwind css를 설치할거냐고 물어본다. 그럼 왜 Tailwind css를 추천할까?

이유는 아래와 같다. 개인적으로 다른 CSS Frameworks에 적용될만한 내용이라 공감은 잘 안된다..

그럼에도 Next.js팀은 Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js. 소개했으니 이런 이유 때문이라도 스타일은 css, scss 등 다양한 framework보다 Tailwind CSS를 한번 사용해보자.

 

1. 생산성 향상

Tailwind CSS는 유틸리티 클래스 기반의 접근 방식을 사용하여 스타일을 정의합니다. 이는 복잡한 CSS 작성과 관리를 단순화하고, 반복적인 CSS 작성 작업을 줄여줍니다.

• 유틸리티 클래스: 미리 정의된 클래스를 사용하여 빠르게 스타일링을 적용할 수 있습니다.

• 빠른 개발 속도: 코드 작성 속도를 크게 향상시켜 줍니다.

(동료는 코드가 너무 지저분한 느낌으로 변해서 불편하다고 이야기 한다.)

 

2. 일관성 유지

Tailwind CSS는 일관된 디자인 시스템을 쉽게 구축할 수 있도록 도와줍니다.

• 디자인 시스템: 팀 전체에서 일관된 스타일링 규칙을 유지할 수 있습니다.

• 대규모 프로젝트: 특히 대규모 프로젝트에서 유용합니다.

 

3. 커스터마이징 용이성

Tailwind CSS는 기본 설정을 통해 매우 유연하게 커스터마이징할 수 있습니다.

• 설정 파일: tailwind.config.js 파일을 통해 색상, 간격, 타이포그래피 등을 사용자 정의할 수 있습니다.

• 디자인 요구 사항: 특정 디자인 요구 사항에 맞춰 쉽게 조정할 수 있습니다.

 

4. 파일 크기 최적화

Tailwind CSS는 사용하지 않는 CSS를 제거하는 "purge" 기능을 제공합니다.

• 최종 빌드 최적화: 실제로 사용된 CSS만 포함되어 파일 크기를 최소화할 수 있습니다.

• 성능 향상: 성능 최적화에 큰 도움이 됩니다.

 

5. 커뮤니티와 에코시스템

Tailwind CSS는 큰 커뮤니티와 풍부한 플러그인 에코시스템을 가지고 있습니다.

• 플러그인: 다양한 플러그인과 확장 기능을 통해 Tailwind CSS의 기능을 확장할 수 있습니다.

• 리소스: 커뮤니티에서 제공하는 다양한 리소스를 활용할 수 있습니다.

(생각보다 커뮤니티가 활성화 된 느낌이다. Reddit, Discord를 적극 활용해보자.)

 

6. 디자이너와 협업 용이

Tailwind CSS의 클래스 기반 접근 방식은 디자이너와의 협업을 용이하게 합니다.

• 디자인 구현: 디자이너가 Tailwind CSS 클래스 명을 이해하고 활용하면, 디자인 시스템을 더 쉽게 구현하고 유지할 수 있습니다.

(과연 디자이너와 협업이 용이할까? 잘 모르겠다.)