🎨 3. Tailwind CSS vs Styled-components, 스타일링 방식 고민 정리

---

요즘 사이드 프로젝트를 하면서 스타일링을 어떤 방식으로 할지 많이 고민했었다.
특히 Tailwind CSS랑 styled-components 중 뭘 쓰는 게 좋을까 생각이 많았고,
두 가지 다 써보면서 느낀 점을 정리해봤다.

---

✅ Tailwind CSS?

클래스 단위로 유틸리티 스타일을 조합해서 쓰는 방식

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  버튼
</button>

장점

• 빠르다! 그냥 클래스 붙이면 끝
• 따로 스타일 파일 안 만들어도 됨
• 디자인 시스템 만들기 편함 (특히 다크모드, 반응형 등)

단점

• 클래스가 길어짐
• 코드가 지저분해 보일 수 있음
• 스타일 재사용은 살짝 불편함

---

✅ styled-components?

CSS-in-JS 방식으로, 자바스크립트 안에서 스타일을 작성

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
`;

<Button>버튼</Button>

장점

• 컴포넌트 기반으로 코드가 깔끔함
• JS 변수/props로 동적으로 스타일 지정 가능
• 글로벌 스타일, 테마 설정 등도 편리함

단점

• 러닝커브가 조금 있음
• 런타임 스타일이라 퍼포먼스 이슈 있을 수 있음
• 빌드 사이즈가 Tailwind보다 커질 수 있음

---

✅ 개인적인 선택 기준

기준	Tailwind CSS	styled-components
빠른 스타일 작업	👍 빠름	🐢 상대적으로 느림
코드 일관성 유지	🤔 클래스 조합 주의 필요	👍 컴포넌트 단위로 명확함
JS와 스타일 통합	❌ 분리됨	👍 같이 관리 가능
디자인 시스템 구축	👍 전용 툴처럼 편리함	👍 가능하지만 설정 필요
러닝커브	🤏 낮음	📈 조금 있음

---

📝 내가 느낀 점

개인 프로젝트에서는 Tailwind가 정말 빠르고 편해서 자주 쓰게 되는데,
디자인 커스터마이징이나 재사용성에서는 styled-components가 훨씬 명확하게 느껴졌다.
정리하자면,

• 프로토타입/빠른 UI 개발엔 Tailwind
• 팀 프로젝트/디자인 시스템엔 styled-components
  가 좀 더 잘 맞는 것 같다!

---

결국 프로젝트 성격과 팀 스타일에 따라 정답이 달라지는 듯!