스타일링
Tailwind CSS / CSS Modules / styled-components
Tailwind CSS
클래스 이름만 쓰면 스타일이 입혀져서 파일을 오갈 필요가 없습니다. shadcn/ui와도 잘 맞습니다
결과 비교
같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.
Tailwind CSS
CSS Modules
styled-components
코드 비교
코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.
비교
2026년 9월 기준
특징
클래스 이름(예: p-4, text-lg)을 나열해서 스타일을 입힙니다
이럴 때 좋아요
빠르게 만들고 싶을 때. shadcn/ui를 사용할 때
CSS Modules
공식 사이트 ↗특징
일반 CSS를 컴포넌트마다 별도 파일에 씁니다. 클래스 이름이 다른 곳과 겹치지 않습니다
이럴 때 좋아요
CSS에 익숙하고 CSS를 그대로 쓰고 싶을 때
styled-components
공식 사이트 ↗특징
JavaScript 안에 CSS를 써서 스타일이 포함된 컴포넌트를 만듭니다
이럴 때 좋아요
이미 사용 중인 프로젝트를 유지보수할 때 (새 프로젝트라면 나머지 두 가지를 추천)