스타일링

Tailwind CSS / CSS Modules / styled-components

추천

Tailwind CSS

클래스 이름만 쓰면 스타일이 입혀져서 파일을 오갈 필요가 없습니다. shadcn/ui와도 잘 맞습니다

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

Tailwind CSS
CSS Modules
styled-components

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

export default function App() {
  return (
    <div className="m-4 rounded-xl border p-6">
      <h2 className="text-lg font-semibold">나의 첫 카드</h2>
      <p className="mt-2 text-sm text-gray-500">
        제목, 설명, 버튼을 클래스 이름만으로 꾸몄습니다.
      </p>
      <button className="mt-4 rounded-lg bg-black px-4 py-2 text-sm text-white hover:bg-gray-700">
        자세히 보기
      </button>
    </div>
  )
}

비교

2026년 9월 기준

Tailwind CSS

추천공식 사이트 ↗

특징

클래스 이름(예: p-4, text-lg)을 나열해서 스타일을 입힙니다

이럴 때 좋아요

빠르게 만들고 싶을 때. shadcn/ui를 사용할 때

특징

일반 CSS를 컴포넌트마다 별도 파일에 씁니다. 클래스 이름이 다른 곳과 겹치지 않습니다

이럴 때 좋아요

CSS에 익숙하고 CSS를 그대로 쓰고 싶을 때

styled-components

공식 사이트 ↗

특징

JavaScript 안에 CSS를 써서 스타일이 포함된 컴포넌트를 만듭니다

이럴 때 좋아요

이미 사용 중인 프로젝트를 유지보수할 때 (새 프로젝트라면 나머지 두 가지를 추천)