Tailwind CSS: 리액트와 함께 쓰는 유틸리티 기반 스타일링

Tailwind CSS와 React의 환상적인 궁합

기존에는 CSS 파일을 별도로 작성하고 className을 지어주는 과정(BEM 방법론 등)이 매우 번거로웠습니다. Tailwind CSS는 flex, text-center, pt-4처럼 미리 정의된 유틸리티 클래스들을 조립하여 별도의 CSS 파일 없이 HTML(JSX) 안에서 직접 디자인을 완성하는 프레임워크입니다.

전통적 CSS vs Tailwind CSS

React 컴포넌트와의 완벽한 시너지

Tailwind는 클래스명이 길어지는 단점이 있지만, 리액트에서는 UI를 <Button />과 같은 컴포넌트로 분리하기 때문에 지저분한 클래스명을 한 곳에 캡슐화(숨김)할 수 있습니다.

Tailwind 핵심 규칙

여백: m-4 (margin: 1rem), px-2 (padding-x: 0.5rem) - 1단위는 보통 0.25rem(4px)
색상: bg-blue-500, text-white, border-gray-200
상태 및 반응형: hover:bg-blue-600, md:flex (화면이 md 크기 이상일 때 flex 적용)

TailwindCard.jsx

// Tailwind CSS가 설정된 환경이라고 가정합니다.

function TailwindCard() {
  return (
    // 부모 컨테이너: 최대 너비 설정, 중앙 정렬, 상하 여백
    <div className="max-w-sm mx-auto mt-10">
      
      {/* 카드 래퍼: 흰색 배경, 그림자, 둥근 모서리, 패딩, 테두리 */}
      <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6 overflow-hidden">
        
        {/* 태그 뱃지 */}
        <span className="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
          New Course
        </span>
        
        {/* 제목 텍스트 */}
        <h2 className="mt-3 text-xl font-bold text-gray-800">
          Tailwind CSS 완벽 가이드
        </h2>
        
        <p className="mt-2 text-gray-600 text-sm leading-relaxed">
          별도의 CSS 파일 없이 오직 클래스 조합만으로 아름다운 반응형 UI를 구축하는 비법을 배웁니다.
        </p>
        
        {/* 액션 버튼: flex 박스 정렬, 배경색, 호버 효과, 트랜지션 */}
        <div className="mt-5 flex justify-end">
          <button className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
            수강하기
          </button>
        </div>
        
      </div>
    </div>
  );
}

실행 결과