next.js 공식문서 정리 중 아래와 같은 내용을 보았다.
CSS Styling 툴 중 가장 많이 쓰이는 Styled Component와 tailwindcss에 대해 비교해볼 예정이다.

---

Styled Component

CSS-in-JS 라이브러리 중 하나로, JavaScript 파일 내에서 CSS를 작성할 수 있게 해주며 각 컴포넌트에 고유한 클래스를 자동으로 생성해 스타일 충돌을 방지한다.

특징

- 쉬운 모듈화
: 스타일을 컴포넌트 단위로 모듈화 할 수 있어 재사용성과 유지 보수성이 크게 향상된다.
Button Component의 CSS를 styled-components를 사용하여 JS 내에서 정의
➡️ 오른쪽 코드처럼 프로젝트 내 어디서든 동일한 스타일로 사용될 수 있다!

- 편한 동적 스타일링
: 스타일을 동적으로 변경할 수 있어 조건부 스타일링이나 테마 변경이 용이해진다.
➡️ primary prop에 따라 버튼의 배경색이 동적으로 변경, 유연하고 강력한 스타일링을 구현할 수 있다.

 

장점

- 컴포넌트 단위의 유지보수
: Javascript 파일에 CSS를 같이 사용해 컴포넌트의 스타일링과 로직을 한 파일에서 관리할 수 있다.
➡️ 한 파일에서 직관적으로 컴포넌트를 관리할 수 있다.

- 학습 용이성
: 기존 CSS 지식을 바탕으로 쉽게 사용할 수 있다.

단점

- Javascript 파일 증가
: 대규모 프로젝트에서 번들 크기 증가 -> 초기 웹 페이지 로딩 속도가 느려짐

- 런타임 성능 저하 가능성
: 스타일을 컴포넌트 렌더링 시점에 생성 -> 렌더링 성능 저하
📌 웹페이지 사용자의 경험을 떨어뜨리고, 예매 사이트와 같이 성능에 민감한 애플리케이션에서는 큰 문제가 된다.

결론

CSS와 JavaScript 파일을 통합하여 코드의 재사용과 유지 보수가 용이하다는 특징 때문에 컴포넌트 단위의 점진적인 스타일링할 때 적합하다

---

 

Tailwind CSS

유틸리티 퍼스트(Utility-First) CSS 프레임워크로 미리 정의된 클래스를 사용하기 때문에 클래스 충돌 문제를 방지할 수 있다.

➡️ TailwindCSS는 하나의 클래스가 하나의 속성을 나타냄

ex. p-5 = padding: 20px
: 이는 코드 작성 속도를 크게 높여주며 스타일을 빠르게 적용할 수 있도록 도와준다.

특징

- 일관성 유지
: 미리 정의된 유틸리티 클래스들은 일관된 스타일 가이드를 제공, 팀 내 모든 개발자가 동일한 스타일링 규칙을 따르게 된다.

➡️ tailwind.config.js 파일에서 디자인 시스템에 맞는 유틸리티 클래스를 정의한다.

 
- 편한 반응형 디자인
: 미디어 쿼리를 사용하지 않고, 다양한 화면 크기에 맞춰 스타일을 적용할 수 있는 유틸리티 클래스 제공
➡️ 화면 크기에 따라 자동으로 조정됨

장점

- 빠른 스티일링 적용
: 미리 정의된 유틸리티 클래스 사용하여 신속하게 스타일을 적용할 수 있다.
➡️ 프로토타입이나 빠른 반복 개발에 유리

- 심플해진 프로그래밍
: HTML + CSS / JavaScript로 나뉘며 로직과 스타일링 두 가지로 명확하게 분리될 수 있다.

단점

- 긴 클래스명으로 인한 HTML 가독성 저하
: 여러 유틸리티를 조합하다보면 가독성이 떨어져 유지 보수가 어려워진다.

- 학습의 어려움
: 처음에 유틸리티 클래스의 개념과 사용법을 이해하는 데 시간이 걸리며, 기본적인 스타일 구성에 필요한 클래스를 암기하는 것이 어렵다.

---

 

언제, 어떤 기준으로 선택해야 할까?

Styled Component

⭐ 몇 가지의 컴포넌트가 반복적으로 많이 쓰이는 상황
-> Styled Component의 모듈화를 통해 해결하자!

tailwindcss

⭐ 빠른 개발 속도가 필요하거나 웹 사이트의 크기, 성능이 중요한 작업, 일관된 디자인 시스템 속에서 개발 되어야 할 때

---

npm 다운로드 수

Styled Components와 Tailwind CSS의 npm 다운로드 수를 나타낸 그래프
2023년을 기점으로 tailwind CSS가 더 많이 사용되는 것을 알 수 있다!

---

결론

물론 실제 선택은 둘 중 한 가지만 선택해서 사용하는 것이 아닌 두 기술을 혼용하여 사용하는 것도 가능하다. 여러가지 상황을 고려해서 선택하면 좋을 것 같다!

참고
https://www.elancer.co.kr/blog/detail/290
https://x2bee.tistory.com/105