Tailwind CSS: 기본 개념과 기초 가이드

ε( ε ˙³˙)з ○º·2025년 6월 19일
post-thumbnail

Intro

Tailwind CSS는 빠르고 효율적인 UI 개발을 도와주는 프레임워크로, 클래스 이름만 조합해도 간결하고 일관된 UI를 빠르게 만들 수 있어요.
별도의 커스텀 CSS 작성 없이, 제공되는 유틸리티 클래스들을 조립하는 방식이기 때문에 빠른 개발 속도와 유지보수에 유리한 개발 환경을 제공합니다.

이번 글에서는 Tailwind CSS의 기본 개념부터 실무 도입 시 꼭 알아야 할 세팅, 자주 사용하는 기본 유틸리티 클래스까지 처음 사용할 때 도움이 될만한 기초 내용을 정리해보았습니다.

Tailwind CSS란?

Tailwind CSS는 빠르게 커스텀 UI를 만들 수 있도록 도와주는 유틸리티 퍼스트 CSS 프레임워크입니다. 여기서 유틸리티 퍼스트란, '하나의 CSS 속성만 담당하는 클래스'를 조합해서 UI를 구성하는 개발 방식을 의미해요.

Tailwind CSS의 가장 큰 장점은 미리 정의된 유틸리티 클래스들을 조합해 스타일을 빠르게 완성할 수 있다는 점이에요. 버튼, 카드, 레이아웃처럼 자주 반복되는 UI를 클래스 조합만으로 간결하게 만들 수 있어, 빠른 개발 속도와 일관된 디자인 유지에 정말 유용해요.

👀 Tailwind CSS 공식 문서에서도 이 세 가지를 핵심 장점으로 소개하고 있어요.

  • 빠른 개발 속도
  • 직관적인 클래스 조합
  • 불필요한 CSS 제거로 빌드 최적화 가능

  • px-4 좌우 패딩
  • py-2 상하 패딩
  • bg-blue-500 배경색
  • text-white 글자색
  • rounded 테두리 둥글기

여백, 색상, 폰트, 테두리 등 스타일 속성이 모두 클래스 이름으로 제공되기 때문에 개발자는 이 클래스들을 빠르게 조립해서 UI를 완성할 수 있어요.

Tailwind CSS 실무 도입 시 필수 세팅 가이드

Tailwind CSS는 설치 후 config 파일을 어떻게 세팅하느냐에 따라 팀 생산성, 코드 일관성, 퍼포먼스까지 모두 영향을 줄 수 있어요.

실무에서는 단순히 기본 세팅만 하는 게 아니라, 우리 팀의 스타일 가이드와 프로젝트 환경에 맞게 커스터마이징하을 하는 것도 중요합니다.

이번에는 실무에서 자주 하는 세팅 포인트들을 정리해볼게요.

✔️ 기본 설치

  • Tailwind CSS 설치 npm을 통해 설치 tailwindcss합니다
npm install tailwindcss @tailwindcss/vite

설치 후 tailwind.config.js 파일과 postcss.config.js 파일이 생성돼요.

✔️ 필수 config 세팅

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

◻️ content 설정

  • content는 Tailwind CSS가 프로젝트 내 실제 사용 중인 클래스만 빌드 결과에 포함하도록 도와주는 옵션이에요.

  • 공식 문서에서도 이 설정이 잘못되면 필요한 클래스가 빌드 시 삭제될 수 있으니 주의하라고 강조하고 있어요.

◻️ theme 커스터마이징: 팀 내 디자인 시스템 반영하기

Tailwind CSS는 기본 컬러 세트가 제공되지만 실무에서는 팀 내 디자인 시스템에서 지정한 브랜드 컬러, 여백, z-index를 커스터마이징해서 사용하는 경우가 많아요.

디자인 파트에서 사용하는 브랜드 컬러를 tailwind.config.js에 미리 정의해두면 개발할 때 훨씬 편리해집니다.

theme: {
  extend: {
    colors: {
      primary: '#1A73E8',
      secondary: '#F9AB00',
    },
    spacing: {
      72: '18rem',
      84: '21rem',
    },
    zIndex: {
      60: '60',
    },
  },
},

  • config에 컬러를 미리 정의해두면 클래스가 bg-primary, text-secondary처럼 가독성도 좋아지고 팀원들도 쉽게 사용할 수 있어요.

  • 여백이나 z-index도 숫자만 기억하면 바로 클래스 조합으로 쉽게 사용할 수 있어요.

◻️ 빌드 최적화: content 옵션과 safelist 관리

Tailwind CSS는 기본적으로 빌드 시 프로젝트 내에서 사용하지 않는 CSS를 모두 제거하는 방식(purge)이에요. 덕분에 불필요한 CSS가 빠지고, 빌드 파일이 가벼워지는 퍼포먼스 최적화 효과를 얻을 수 있어요.

하지만 이 과정에서 동적으로 생성하는 클래스는 빌드 타임에 Tailwind가 인식하지 못할 수 있어요.

<div className={`text-${color}`}>텍스트</div>
  • 이렇게 클래스 이름을 변수로 동적으로 만들면 Tailwind는 빌드할 때 text-${color}라는 문자열을 그대로 인식하고, 어떤 실제 클래스가 사용될지 판단하지 못해서 필요한 CSS를 삭제해버릴 수 있어요.

이럴 때는 tailwind.config.js의 safelist 옵션을 사용해서,
빌드할 때 반드시 남겨야 할 클래스를 직접 등록해줘야 해요.

safelist: [
  'text-blue-500',
  'text-red-500',
  // 동적 클래스 예외 처리
],

safelist에 등록된 클래스는 빌드 시 자동 삭제 대상에서 제외돼요. 동적으로 생성되는 클래스도 안전하게 사용할 수 있어요.

🚨 Purge 동작과 동적 클래스 이슈 (공식 가이드 기반))

다만 Tailwind CSS 공식 문서에서는 동적으로 클래스를 생성하는 방식은 가급적 피하는 것을 권장하고 있어요.

🏴 Purge(=빌드 최적화)란?
Tailwind는 기본적으로 빌드 시 content 옵션에 지정된 파일 내에서 실제로 사용하는 클래스를 자동으로 탐색하고 나머지는 제거하는(tree-shake) 방식이에요

Tailwind는 소스 파일을 플레인 텍스트로 정적 분석해서 실제로 사용한 클래스만 남기고, 나머지는 빌드 시 제거하기 때문에 클래스 이름이 ${}처럼 동적으로 조합되면, 빌드 타임에 Tailwind가 어떤 클래스를 써야 하는지 인식하지 못할 수 있어요.

Tailwind CSS는 정적 클래스를 명시적으로 작성하거나 동적 상태를 깔끔하게 관리하려면 tailwind-variants를 사용하는 것도 좋은 방법이에요. (tailwind-variants는 정적 클래스 이름만 사용하므로 purge 이슈가 발생하지 않아요.)

컴포넌트 설계에서 Tailwind CSS 기초 가이드

Tailwind CSS의 유틸리티 클래스는 대부분 기존 CSS 속성을 짧게 래핑한 형태라, CSS를 어느 정도 알고 있다면 클래스 이름만 보고도 쉽게 유추할 수 있어요.

✔️ className props 패턴으로 재사용성 높이기

Tailwind CSS는 클래스 조합으로 스타일을 작성하기 때문에,
className props를 열어두면 공통 스타일을 유지하면서도 유연하게 재사용할 수 있어요.

✔️ 조건부 스타일은 classnames, clsx로 관리하기

상태별로 스타일이 달라질 때는 classnames 또는 clsx를 사용하면 클래스 조합을 깔끔하게 관리할 수 있어요.

✔️ tailwind-variants로 상태별 스타일 그룹 관리하기

최근에는 tailwind-variants라는 라이브러리도 많이 사용되고 있어요. 컴포넌트 별로 상태, 크기, 타입을 깔끔하게 그룹화해서 관리할 수 있는 도구입니다.

💡 tailwind-variants는 공식 사이트에서 자세한 사용법을 볼 수 있어요.

실무에서 자주 사용하는 Tailwind CSS 유틸 클래스

Tailwind CSS는 정말 다양한 유틸리티 클래스를 제공하는데요.

공식 문서를 살펴보다 보니, Tailwind CSS는 자주 사용하는 클래스 조합이나 접두사가 반복되는 경우가 많다는 걸 알게 되었어요.

✔️ 레이아웃

  • flex 요소를 가로 정렬
  • justify-between 좌우 공간 최대 분배
  • items-center 세로 가운데 정렬
  • gap-4 요소 간 여백

✔️ 반응형: 많이 사용하는 버튼, 텍스트 크기 대응

  • sm:, md:, lg 브레이크포인트 (공식 기본값: sm 640px, md 768px, lg 1024px)
  • text-base md:text-lg 작은 화면에서는 기본 크기, 중간 화면부터 크게
  • lg:px-6 큰 화면에서 여백 확장

✔️ 상태: 버튼, 입력 폼, 링크에 자주 적용

  • hover 마우스를 올렸을 때 색상 변경
  • focus 포커스 시 테두리 강조
  • disabled 비활성화 상태 시 흐리게

✔️ 그 외 기본 스타일

  • p-4 패딩
  • bg-gray-100 배경색
  • rounded 테두리 둥글게
  • shadow-md 그림자

다크 모드 지원

✔️ 다크 모드 설정

Tailwind CSS는 기본적으로 media 또는 class 기반 다크 모드를 지원해요. 다크 모드를 어떤 방식으로 적용할지는 프로젝트에 맞게 선택할 수 있어요.

module.exports = {
  darkMode: 'class', // 'media' 또는 'class'
  // ...
}
  • media 사용자의 OS, 브라우저 다크 모드 설정을 따라 자동 적용
  • class dark 클래스를 수동으로 추가할 때만 다크 모드 적용

media 모드는 사용자의 OS나 브라우저가 다크 모드로 설정돼 있으면, Tailwind CSS가 자동으로 다크 모드를 적용하기 때문에 개발자가 따로 다크 모드 상태를 관리할 필요가 없어요.

class 모드는 다크 모드 토글 버튼을 통해 사용자가 직접 다크 모드를 선택할 수 있어요.
이때, 다크 모드를 적용하려면 HTML 또는 body 태그에 dark 클래스를 직접 추가해주어야 해요.

<div className="bg-white text-black dark:bg-black dark:text-white">
  다크 모드 지원 UI
</div>
  • dark: 접두사를 붙이면, 다크 모드에서만 적용할 클래스를 쉽게 추가할 수 있어요. 이렇게 한 줄로 라이트 모드와 다크 모드 스타일을 동시에 관리할 수 있습니다.

💭 마무리하며

Tailwind CSS는 클래스 이름만 잘 이해해도 빠르게 개발할 수 있는 프레임워크예요. 도메인에 따라 클래스 네이밍만으로 디자인을 맞춰가는 게 다소 복잡해질 수도 있지만, 빠르게 공통된 UI를 반복해서 작업해야 하는 환경에서는 개발 효율성을 높이는 데 정말 적합한 도구라고 느꼈어요.

실무에서는 디자인 시스템과 팀 개발 환경에 맞춰 유연하게 세팅할 수 있다는 점도 Tailwind CSS의 큰 장점인 것 같아요. 💪🏻

📚 Reference

이 글은 공식 문서를 기반으로 내용을 정리한 포스팅입니다.
혹시 내용 중 틀린 부분이나 보완할 부분이 있다면 댓글로 남겨주시면 감사하겠습니다. 🙏🏻

profile
ε( ε ˙³˙)з ○º
차곡차곡 쌓아두기 💭
이전 포스트

2024년 회고: 나의 일과 성장의 민낯

다음 포스트

Framer Motion: 배너에 자연스러운 UX 더하기

0개의 댓글