Tailwind CSS vs Styled-components 비교

React에서 css in js를 다루는 여러 가지 방법이 있다.

그중 가장 선호되는 스택 두 개는 Tailwind CSS와 Styled-components이다.

 

항상 프로젝트를 시작할 때면 이 두 개를 고민하고는 한다.

각 스택의 장단점을 먼저 소개해보자면

 

Tailwind CSS

Tailwind CSS는 클래스를 활용해 css를 적용시키는 방식으로 아래와 같이 코드를 짤 수 있다.

// made by tailwind css
<div class="block m-1">
	안녕하세요
</div>

// made by vanilla
<div style="display: block; margin: 0.25rem">
	안녕하세요
</div>

처음 보는 사람은 스타일 인라이닝보다 조금 간결하다는 점을 제외하면 장점을 잘 못 느낄 수도 있다.

하지만 :hover, @media와 같은 요소들은 인라이닝이 안되고 스타일시트를 따로 작성해야 한다.

 

이 경우 장점이 드러나게 된다.

// made by tailwind css
<div class="w-16 hover:scale-125 md:w-32">
	안녕하세요
</div>

// made by vanilla
<div class="target">
	안녕하세요
</div>

<style>
.target {
	width: 16px;
}

.target:hover {
	transform: scale(1.25);
}

@media (min-width: 768px) { 
    .target {
    	width: 32px;
    }
}

정말 간결해진다. 

그리고 다른 장점도 살펴보면 어떤 게 있을까..?

 

우선 클래스 이름이 겹쳐 스타일이 꼬일 일이 없다. 

프론트 개발을 해보았다면 vue에 scoped를 빠트렸을 때와 같이 분명 이 문제를 겪은 경험이 있을 것이다...

 

그리고 번들 크기가 작다는 장점도 있다.

네트워크가 느린 환경에서는 번들 크기에 따라 UX차이가 극심해진다. 이런 관점에서 볼 때 번들 크기가 작다는 건 엄청나게 큰 장점이다.

 

단점

단점으로는 어떤 점이 있을까?

// made by tailwind css
<div class="block m-1">
	안녕하세요
</div>

// made by vanilla
<div style="display: block; margin: 0.25rem">
	안녕하세요
</div>

위 코드를 다시 빌려와서 보면

display: block -> block, margin: 0.25rem -> m-1로 바꾸기 위해서는 각각의 스타일이 어떤 클래스에 해당하는지 외우는 러닝커브가 필요하다.

 

프로젝트를 구성할 때 러닝커브는 분명 꽤 중요한 요소이다.

팀 안에 이 스택에 대해 모르는 사람이 있다면 그만큼 리소스는 낭비되는 것이다.

---

Styled-components

Styled-components 또한 css in js를 도와주는 스택으로 아래와 같이 css를 작성할 수 있다.

const Container = styled.div`
	width: 16px;
	
	&:hover {
		transform: scale(1.25)
	}

	@media (min-width: 768px) {
		width: 32px;
	}
`;

따로 이 스택에 관해서 배우지 않고 css만 알고 있어도 충분히 활용 가능하다.

css와 함께 컴포넌트를 만들 수 있다는 장점도 있고 러닝커브가 딱히 없다는 장점이 있다.

 

단점

하지만 분명 단점도 존재하는데 작성을 하다 보면 이게 어떤 태그인지 다시 올라가서 확인해야 하는 번거로움이 있다.

또 어디까지 styled 컴포넌트를 만들어야 하고 어디까지 클래스를 써야 할지 애매한 경우가 굉장히 많다..

이러한 점은 컨벤션으로 어느 정도 해결할 수 있을 것 같지만 개발을 하다 보면 분명 그래도 헷갈리는 점은 존재한다.

---

tailwind css는 개발 속도를 올리는 데에 유리한 스택이라고 생각하고,

styled-components는 컴포넌트 중심 개발을 도와주는 스택이라고 생각한다.

 

두 스택 모두 css in js를 도와주는 훌륭한 스택이다.

개인적으로는 개발 속도가 빠르고 react의 state와 연계가 좋다고 생각해서 tailwind css를 선호하는 편이다