Tailwind, Styled Components 같이 사용하는 이유

1) Tailwind CSS 가독성 문제

Tailwind CSS는 HTML 태그에 유틸리티 클래스를 바로 작성하여 스타일링한다. 이 때문에 클래스명이 길어져 컴포넌트의 JSX코드가 지저분해진다.

Styled-components를 사용하면 CSS-in-JS 문법 사용으로 컴포넌트를 깨끗하게 유지할 수 있다.

2) Tailwind의 스타일링 재사용 문제

Tailwind만 사용했을 때, 반복해서 사용되는 스타일링을 재사용할 수 없는 문제가 있었다. Styled-components를 사용하면 스타일링을 컴포넌트화 하여 재사용수 있기 때문에 효율적인 코드 작성이 가능하다.

3) Styled-componets의 props 사용

컴포넌트 내부 상태에 따라 스타일링 하고자 할 때 styled-components 구문에서 props를 받아 사용할 수 있다. Tailwind CSS와 Styled-components를 함께 사용하면 조건에 따른 Tailwind CSS 클래스 사용이 가능하다.