Tailwind CSS 설정 및 사용

이전 절에서 CSS 모듈, Sass, 그리고 CSS-in-JS와 같은 다양한 스타일링 접근 방식을 살펴보았습니다.

각 방식은 고유한 장단점을 가지고 있으며, 프로젝트의 요구사항에 따라 선택됩니다.

이번 절에서는 프론트엔드에서 널리 쓰이는 Tailwind CSS의 개념과 사용 방식을 다룹니다.

Tailwind CSS는 유틸리티 우선(Utility-first) CSS 프레임워크로, 미리 정의된 작은 유틸리티 클래스를 HTML 마크업에 직접 적용해 스타일을 구성하는 방식입니다.

이 접근은 기존 CSS 작성 방식과 다른 패러다임을 제시하며, 빠른 개발 속도와 일관된 디자인 시스템 구축에 강점을 보입니다.

Next.js는 Tailwind CSS와의 통합을 매우 쉽고 효율적으로 지원합니다.

Tailwind CSS란 무엇인가요?

Tailwind CSS는 저수준(low-level) CSS 프레임워크입니다.

btn, card와 같은 의미론적인(semantic) 클래스 이름을 미리 정의하여 제공하는 대신, flex, pt-4, text-center, rotate-90 등과 같이 CSS 속성-값 쌍에 직접 매핑되는 수많은 유틸리티 클래스를 제공합니다.

핵심 특징

유틸리티 우선(Utility-first): HTML 요소에 class 속성으로 여러 개의 유틸리티 클래스를 조합하여 스타일을 만듭니다.
컴파일 시점에 CSS 생성: 소스에서 실제로 사용한 유틸리티를 감지해 필요한 CSS를 생성하므로 런타임 스타일 엔진이 필요하지 않습니다.
높은 커스터마이징 가능성: Tailwind CSS 4에서는 전역 CSS의 @theme 블록으로 색상, 폰트, 간격 같은 디자인 토큰을 확장할 수 있습니다.
반응형 디자인 내장: sm:, md:, lg: 등과 같은 접두사를 사용하여 반응형 디자인을 쉽게 구현할 수 있습니다.
의사 클래스(Pseudo-classes) 지원: hover:, focus:, active: 등과 같은 접두사를 사용하여 상호작용 상태의 스타일을 직접 적용할 수 있습니다.

예시

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  버튼
</button>

위 코드는 background-color, padding, font-weight, border-radius 등 여러 CSS 속성들을 유틸리티 클래스로 조합하여 하나의 버튼을 스타일링합니다.

왜 Tailwind CSS를 사용해야 할까요? (이점)

Tailwind CSS의 주요 이점은 다음과 같습니다.

빠른 개발 속도: CSS 파일을 오가며 클래스 이름을 고민하거나 새로 작성할 필요 없이, HTML 마크업 내에서 빠르게 스타일을 적용할 수 있습니다.
일관된 디자인 시스템: 공통 토큰의 간격·색상·타이포그래피를 재사용하기 쉽습니다. 임의 값도 사용할 수 있으므로 일관성은 팀의 사용 규칙에 달려 있습니다.
유지보수성 향상: 컴포넌트 마크업에서 적용한 유틸리티를 확인하기 쉽습니다. 유틸리티는 전역 CSS이므로 CSS Modules처럼 클래스 이름을 지역화하지는 않습니다.
필요한 유틸리티 생성: 탐지된 클래스에 해당하는 CSS를 생성합니다. 최종 크기는 사용한 클래스·변형과 추가 CSS의 양에 따라 달라집니다.
스타일 생성 런타임 불필요: 브라우저에서 JavaScript로 유틸리티 CSS를 생성하는 엔진이 필요하지 않습니다. CSS 계산·레이아웃·페인팅 비용까지 사라지는 것은 아닙니다.
모바일 우선 반응형 디자인: 접두사가 없는 클래스는 모든 화면 크기에 적용되고, md: 같은 접두사는 해당 breakpoint 이상에 적용됩니다.

Next.js에서 Tailwind CSS 설정 및 사용하기

Next.js는 Tailwind CSS를 위한 공식적인 설치 가이드를 제공하며, 설정 과정이 매우 간단합니다.

Next.js 프로젝트 생성 (또는 기존 프로젝트 사용): 새 프로젝트에서 create-next-app의 기본 권장 설정을 선택하면 Tailwind가 포함됩니다. 설정을 직접 고르는 경우 Tailwind 질문에 Yes를 선택합니다. 이미 설정된 프로젝트라면 설치와 설정 파일을 중복해서 추가하지 않습니다.

npx create-next-app@latest my-app-with-tailwind
# ? Would you like to use Tailwind CSS? Yes

기존 프로젝트에 추가하는 경우 다음 단계를 따릅니다.

필요한 패키지 설치: tailwindcss, 공식 Tailwind PostCSS 플러그인, PostCSS를 개발 의존성으로 설치합니다.

npm install -D tailwindcss @tailwindcss/postcss postcss

PostCSS 플러그인 연결: 프로젝트 루트에 postcss.config.mjs를 만들고 Tailwind 플러그인을 등록합니다.

postcss.config.mjs

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Tailwind CSS 4의 기본 설정에는 tailwind.config.js나 content 배열이 필요하지 않습니다.

전역 CSS에서 Tailwind 불러오기: Next.js의 전역 CSS 파일에서 Tailwind를 한 줄로 불러옵니다.

src/app/globals.css

@import "tailwindcss";

@theme {
  --color-brand-500: #2563eb;
}

소스의 완전한 클래스 이름은 평문 토큰으로 탐지합니다. node_modules, .gitignore에 포함된 파일 등 기본 제외 범위에 필요한 소스가 있다면 @source로 명시합니다.

전역 CSS 파일을 Root Layout에 임포트: src/app/layout.tsx 파일에 위에서 설정한 전역 CSS 파일을 임포트합니다.

src/app/layout.tsx

import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

설정 후 스타일이 누락되면 증상에 맞는 입력부터 확인합니다.

스타일이 누락될 때 확인할 입력
확인 대상	관련 입력	판단 기준
전체 유틸리티	PostCSS 플러그인, globals.css, Root Layout import	CSS 처리 연결과 최종 스타일시트 로드를 각각 확인
동적 색상 클래스	조건별 완전한 클래스 이름	bg-${tone}-600 같은 문자열 조각은 계산하지 않음; 완성된 이름으로 매핑
외부 패키지 클래스	자동 탐지 제외 경로와 @source	node_modules 등 탐지 밖의 필요한 소스를 명시
반응형 규칙	기본 클래스와 md: 등 접두사	기본은 모든 크기, 접두사는 해당 breakpoint 이상; 미디어 조건과 최종 규칙 확인

전체 유틸리티: 관련 입력: PostCSS 플러그인, globals.css, Root Layout import
판단 기준: CSS 처리 연결과 최종 스타일시트 로드를 각각 확인
동적 색상 클래스: 관련 입력: 조건별 완전한 클래스 이름
판단 기준: bg-${tone}-600 같은 문자열 조각은 계산하지 않음; 완성된 이름으로 매핑
외부 패키지 클래스: 관련 입력: 자동 탐지 제외 경로와 @source
판단 기준: node_modules 등 탐지 밖의 필요한 소스를 명시
반응형 규칙: 관련 입력: 기본 클래스와 md: 등 접두사
판단 기준: 기본은 모든 크기, 접두사는 해당 breakpoint 이상; 미디어 조건과 최종 규칙 확인

탐지기는 소스를 평문으로 읽고 알려진 유틸리티를 생성합니다. 클래스 문자열이 있어도 적용 결과는 CSS 순서와 상태 조건까지 확인해야 합니다.

Tailwind CSS 사용 예시

이제 컴포넌트나 페이지의 JSX/TSX 파일에서 Tailwind CSS 유틸리티 클래스를 직접 사용할 수 있습니다.

실습: Tailwind CSS로 버튼과 카드 컴포넌트 스타일링

src/app/tailwind-css/page.tsx (서버 컴포넌트)

// 클라이언트 컴포넌트를 사용하기 위해 use client 지시어를 가진 파일 임포트
import TailwindButton from './TailwindButton';
import TailwindCard from './TailwindCard';

export default function TailwindCssPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-8">
      <h1 className="text-4xl font-bold text-gray-800 mb-8">
        Tailwind CSS 예제
      </h1>
      <p className="text-lg text-gray-600 mb-12 text-center">
        유틸리티 클래스를 사용하여 컴포넌트를 빠르게 스타일링합니다.
      </p>

      <div className="flex flex-col md:flex-row gap-8 w-full max-w-4xl">
        {/* TailwindButton은 클라이언트 컴포넌트 */}
        <TailwindButton />

        {/* TailwindCard는 클라이언트 컴포넌트 */}
        <TailwindCard title="Tailwind 카드" description="이것은 Tailwind CSS로 스타일링된 카드 컴포넌트입니다.">
          <p className="text-gray-700">추가적인 내용입니다.</p>
          <button className="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
            자세히 보기
          </button>
        </TailwindCard>
      </div>
    </div>
  );
}

src/app/tailwind-css/TailwindButton.tsx (클라이언트 컴포넌트)

"use client";

import React, { useState } from 'react';

export default function TailwindButton() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex flex-col items-center p-6 bg-white rounded-xl shadow-lg w-full md:w-1/2">
      <h2 className="text-2xl font-semibold text-gray-700 mb-4">카운터 버튼</h2>
      <p className="text-xl text-blue-600 mb-4">현재 카운트: <span className="font-bold">{count}</span></p>
      <button
        onClick={() => setCount(prev => prev + 1)}
        className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95"
      >
        클릭하여 카운트 증가
      </button>
      <p className="mt-4 text-sm text-gray-500">이 버튼은 클라이언트 컴포넌트에서 상태를 관리합니다.</p>
    </div>
  );
}

TailwindCard는 아래 원문에서 클라이언트 컴포넌트로 선언되어 있지만, 정적인 props와 children을 표시하는 기능만으로 클라이언트 경계가 필수인 것은 아닙니다. 상태를 사용하는 TailwindButton과 구분합니다.

src/app/tailwind-css/TailwindCard.tsx (클라이언트 컴포넌트)

"use client";

import React from 'react';

interface TailwindCardProps {
  title: string;
  description: string;
  children?: React.ReactNode;
}

export default function TailwindCard({ title, description, children }: TailwindCardProps) {
  return (
    <div className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 w-full md:w-1/2">
      <h2 className="text-3xl font-bold text-gray-800 mb-4">
        {title}
      </h2>
      <p className="text-gray-600 mb-6 leading-relaxed">
        {description}
      </p>
      {children}
    </div>
  );
}

실습 확인

위에서 설명한 Tailwind CSS 설치 및 설정 (postcss.config.mjs, globals.css)을 완료합니다.

src/app/tailwind-css 폴더를 만들고 위 page.tsx, TailwindButton.tsx, TailwindCard.tsx 파일을 생성합니다.

개발 서버(npm run dev)를 실행한 후, http://localhost:3000/tailwind-css로 접속합니다.

Tailwind CSS 클래스들이 적용된 깔끔한 UI를 확인할 수 있습니다.
클릭하여 카운트 증가 버튼을 눌러 상태 변화와 스타일이 잘 작동하는지 확인합니다.
브라우저 개발자 도구를 열어 요소들의 클래스 목록을 확인하면, CSS-in-JS나 CSS 모듈처럼 해시값이 붙지 않고 작성된 유틸리티 클래스 이름 그대로 나타나는 것을 볼 수 있습니다.

Tailwind CSS의 장점과 고려사항

장점

극강의 개발 생산성: CSS 파일을 오가지 않고 HTML/JSX 내에서 거의 모든 스타일을 구현할 수 있습니다.
규칙 재사용: 공통 토큰과 유틸리티 조합을 컴포넌트에 모아 여러 화면에서 재사용할 수 있습니다.

고려사항

긴 클래스 목록: 복잡한 컴포넌트의 경우 class 속성이 매우 길어질 수 있습니다. @apply 지시어를 사용하여 반복되는 유틸리티 클래스 묶음을 커스텀 클래스로 추상화할 수 있지만, 이는 Tailwind의 핵심 철학에서 벗어날 수 있습니다.
초기 학습 곡선: 기존 CSS에 익숙한 개발자는 유틸리티 우선 방식에 적응하는 데 시간이 걸릴 수 있습니다. 모든 스타일이 클래스 이름으로 어떻게 매핑되는지 학습해야 합니다.
동적 값의 표현: 상태에 따라 이미 완성된 클래스 이름을 선택할 수 있습니다. 연속적인 값은 CSS 변수나 인라인 스타일로 전달할 수 있으며, 문자열 조각을 이어 붙인 새로운 클래스 이름은 소스 탐지기가 계산하지 않습니다.
직접 CSS 작성의 감소: 때로는 직접 CSS를 작성해야 할 필요성을 느끼지 못하게 되어, CSS의 기본 개념에 대한 이해도가 낮아질 수 있다는 비판도 있습니다.

Tailwind CSS란 무엇인가요?

왜 Tailwind CSS를 사용해야 할까요? (이점)

Next.js에서 Tailwind CSS 설정 및 사용하기

Tailwind CSS 사용 예시

Tailwind CSS의 장점과 고려사항

이 페이지의 목차