Tailwind CSS vs Styled Components

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

---

1️⃣ CSS 렌더링 방식 차이

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

🔹 Tailwind CSS

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

 

🔹 Styled Components

JavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주입하는 방식
이로 인해 초기 렌더링 시 약간의 오버헤드가 발생할 수 있다.

---

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 속성값을 작성할 수 있어 직관적이다.
• 컴포넌트와 CSS 사이를 오가지 않고 한 곳에서 작업할 수 있다.
• 반응형 디자인을 쉽게 구현할 수 있다. (예: 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와 비슷한 문법으로 중첩 스타일링이 가능하다.
• Tailwind CSS에 비해, CSS 클래스 이름 충돌 문제가 없다.

 

단점

• Tailwind CSS는 마크업에 바로 작성되지만,
  Styled Components는 스타일과 마크업 사이의 관계를 파악하기 위해 스크롤을 반복해야 하는 불편함이 있을 수 있다.
• 실행 중 스타일을 생성해야 하므로, 성능 저하가 발생할 수 있다.