Tailwind CSS vs Styled Components

이번 글에서는 Tailwind CSS와 Styled Components를 사용하면서 느낀 장단점을 정리해본다.

---

1️⃣ CSS 렌더링 방식 차이

방식Tailwind CSSStyled Components

스타일 적용 방식	정적 CSS 파일 (빌드 타임 적용)	런타임에 JavaScript가 스타일 생성
브라우저 성능 영향	미리 컴파일된 CSS를 사용하여 빠름	실행 중 스타일을 생성해야 하므로 성능 저하 발생

🔹 Tailwind CSS: 빌드 시 필요한 클래스만 포함하여 최적화된 CSS 파일을 생성(PurgeCSS 적용). 덕분에 실제 배포 환경에서는 매우 작은 CSS 파일이 만들어져 페이지 로딩 속도가 빨라진다.

🔹 Styled Components: JavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주입하는 방식. 이로 인해 초기 렌더링 시 약간의 오버헤드가 발생할 수 있지만, CSS-in-JS의 장점 덕분에 코드 스플리팅과 함께 사용하면 필요한 스타일만 로드할 수 있다.

---

2️⃣ 스타일 적용 방식 비교

Tailwind CSS 예제

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
  Click me
</button>

장점

• className에 바로 CSS 속성값을 작성할 수 있어 직관적이다.
• HTML과 CSS 사이를 오가지 않고 한 곳에서 작업할 수 있다.
• 미리 정의된 디자인 시스템을 따르기 때문에 일관된 UI를 쉽게 구축할 수 있다.
• 반응형 디자인을 쉽게 구현할 수 있다. (예: md:flex lg:grid)

단점

• Tailwind CSS의 규칙에 맞춰 className을 작성해야 한다.
• 클래스 이름이 길어질 수 있어 코드가 복잡해 보일 수 있다.
• 기존 CSS에 익숙한 개발자는 학습 곡선이 있을 수 있다.

📌 Tailwind CSS 설치 가이드: 공식 문서

---

Styled Components 예제

const Button = styled.button`
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  
  &:hover {
    background-color: #2563eb;
    transition: background-color 0.2s;
  }
`;

<Button>Click me</Button>

장점

• 피그마 등 디자인 툴에서 제공하는 CSS 코드를 그대로 사용할 수 있다.
• 컴포넌트와 스타일이 한 파일에 있어 유지보수가 용이하다.
• props를 활용한 동적 스타일링이 가능하다.
• Sass와 비슷한 문법으로 중첩 스타일링이 가능하다.
• CSS 클래스 이름 충돌 문제가 없다.

단점

• 스타일이 JSX와 분리되어 있지 않아서, Styled Components로 많은 컴포넌트를 정의하면 코드량이 많아질 수 있다.
• 스타일과 마크업 사이의 관계를 파악하기 위해 스크롤을 반복해야 하는 불편함이 있을 수 있다.