Tailwind CSS 시작하기: 설치부터 기본 사용법까지

jadeco·2025년 4월 29일

개요

안녕하세요 허몽자니티입니다.
웹 개발을 하다 보면, 빠르게 스타일링을 하고 싶을 때가 많습니다. 이럴 때 강력한 힘을 발휘하는 것이 바로 Tailwind CSS입니다.

Tailwind CSS는 "유틸리티 퍼스트(Utility-first)" 접근 방식을 지향하는 CSS 프레임워크입니다.
별도로 클래스를 작성하지 않고, 이미 준비된 다양한 클래스를 조합해 빠르고 일관성 있게 UI를 만들 수 있습니다.

이번 포스팅에서는 Tailwind CSS의 기본 개념부터 설치, 그리고 화면 배치와 폰트 설정에 대해 간단히 정리해보겠습니다.

Tailwind CSS란?

"필요한 스타일을 클래스로 제공하여, 별도 CSS 작성 없이 바로 레이아웃을 완성할 수 있도록 돕는 프레임워크"

Tailwind CSS의 특징:

미리 정의된 수천 개의 유틸리티 클래스 제공
커스터마이징과 확장이 자유로움
빠른 프로토타이핑에 매우 적합
반응형 디자인과 다크 모드도 기본 지원

예를 들어, 기존에는 CSS 파일에 코드를 작성하여 적용하였다면 HTML에서 class 속성 부분에 text-center, bg-blue-500, p-4 같은 클래스를 조합해서 스타일을 입힐 수 있습니다.

기존 CSS

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

Tailwind CSS

<!-- tailwind css 적용 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">클릭하세요</button>

Tailwind CSS 설치하기

Tailwind CSS를 설치하는 방법은 여러 가지가 있지만, 가장 기본적인 방법을 소개합니다.
(프로젝트에 Node.js가 설치되어 있다고 가정합니다.)

프로젝트 초기화

npm init -y

Tailwind CSS 설치

npm install -D tailwindcss
npx tailwindcss init

Tailwind CSS 설정 파일(tailwind.config.js) 생성됨
CSS 파일에 Tailwind 지시어 추가

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS를 빌드

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

참고: 간편하게 시작하고 싶다면 CDN으로 불러올 수도 있습니다.
<script src="https://cdn.tailwindcss.com"></script>
단, CDN 방식은 커스터마이징이 어렵기 때문에 본격적인 프로젝트에서는 npm 설치를 추천합니다.

Tailwind CSS 사용해보기

설치가 완료되었다면 이제 HTML에서 Tailwind 클래스를 직접 써볼 수 있습니다.

<div class="p-4 bg-blue-500 text-white text-center">
  Hello, Tailwind!
</div>

이렇게 짧은 코드만으로 간단한 스타일을 입힐 수 있습니다.
이제 본격적으로 화면 배치와 폰트 설정을 다뤄보겠습니다.

[ 화면 배치 관련 ]

✅ 1. 화면 크기 관련 클래스

Tailwind 클래스	CSS 대응값	설명
`h-screen`	`height: 100vh;`	전체 화면 높이
`h-full`	`height: 100%;`	부모 요소 기준 전체 높이
`h-96`	`height: 24rem;`	384px
`min-h-screen`	`min-height: 100vh;`	최소 높이 전체 화면
`max-h-64`	`max-height: 16rem;`	최대 높이 256px
`sm:h-80`	`@media (min-width: 640px) { height: 20rem; }`	반응형 조건에서 320px 높이

✅ 2. Flex 관련 클래스

Tailwind 클래스	CSS 대응값	설명
`flex`	`display: flex;`	Flexbox 활성화
`flex-row`	`flex-direction: row;`	가로 정렬 (기본값)
`flex-col`	`flex-direction: column;`	세로 정렬
`items-center`	`align-items: center;`	세로 중앙 정렬
`justify-center`	`justify-content: center;`	가로 중앙 정렬
`justify-between`	`justify-content: space-between;`	양쪽 정렬

✅ 3. 여백(Margin & Padding) 관련 클래스

Tailwind 클래스	CSS 대응값	설명
`m-4`	`margin: 1rem;`	바깥 여백 전체
`p-6`	`padding: 1.5rem;`	안쪽 여백 전체
`mx-4`	`margin-left/right: 1rem;`	좌우 마진
`my-4`	`margin-top/bottom: 1rem;`	상하 마진
`px-2`	`padding-left/right: 0.5rem;`	좌우 패딩
`py-2`	`padding-top/bottom: 0.5rem;`	상하 패딩

✅ 4. 사이즈(width) 관련 클래스

Tailwind 클래스	CSS 대응값	픽셀(px) 변환	설명
`w-1`	`width: 0.25rem;`	4px	매우 작음
`w-4`	`width: 1rem;`	16px	기본 작은 크기
`w-8`	`width: 2rem;`	32px	중간 크기
`w-16`	`width: 4rem;`	64px	큰 크기
`w-32`	`width: 8rem;`	128px	더 큰 크기
`w-64`	`width: 16rem;`	256px	매우 큰 크기
`w-96`	`width: 24rem;`	384px	화면에 가까운 크기

[ 폰트 관련 ]

Tailwind는 폰트 설정도 매우 간단합니다.

✅ 5. 폰트 크기 관련 클래스

크기	Tailwind 클래스	CSS 대응값	픽셀(px)	설명
xs	`text-xs`	`font-size: 0.75rem;`	12px	매우 작음
sm	`text-sm`	`font-size: 0.875rem;`	14px	작음
base	`text-base`	`font-size: 1rem;`	16px	기본 크기
lg	`text-lg`	`font-size: 1.125rem;`	18px	약간 큼
xl	`text-xl`	`font-size: 1.25rem;`	20px	큼
2xl	`text-2xl`	`font-size: 1.5rem;`	24px	꽤 큼
3xl	`text-3xl`	`font-size: 1.875rem;`	30px	큼
4xl	`text-4xl`	`font-size: 2.25rem;`	36px	제목 크기
5xl	`text-5xl`	`font-size: 3rem;`	48px	큰 제목
6xl	`text-6xl`	`font-size: 3.75rem;`	60px	헤더 수준
7xl	`text-7xl`	`font-size: 4.5rem;`	72px	매우 큼
8xl	`text-8xl`	`font-size: 6rem;`	96px	배너급
9xl	`text-9xl`	`font-size: 8rem;`	128px	매우 거대

✅ 6. 폰트 굵기 관련 클래스

Tailwind 클래스	CSS 대응값	설명
`font-thin`	`font-weight: 100;`	가장 얇음
`font-extralight`	`font-weight: 200;`	매우 얇음
`font-light`	`font-weight: 300;`	얇음
`font-normal`	`font-weight: 400;`	일반 굵기 (기본)
`font-medium`	`font-weight: 500;`	약간 굵음
`font-semibold`	`font-weight: 600;`	중간 굵음
`font-bold`	`font-weight: 700;`	굵음
`font-extrabold`	`font-weight: 800;`	매우 굵음
`font-black`	`font-weight: 900;`	가장 굵음

🎨 색상 관련 클래스

Tailwind 클래스	CSS 대응값	설명
`bg-blue-500`	`background-color: #3b82f6;`	배경색 (파랑 계열, 500 단계)
`text-gray-700`	`color: #374151;`	텍스트 색상 (회색 계열, 700 단계)
`border-red-300`	`border-color: #fca5a5;`	테두리 색상 설정

🎯 색상 단계: 100(연함) ~ 900(진함)

📱 반응형 접두사

접두사	CSS 미디어 쿼리 조건	설명
`sm:`	`@media (min-width: 640px)`	작은 화면 이상일 때 적용
`md:`	`@media (min-width: 768px)`	태블릿 이상일 때 적용
`lg:`	`@media (min-width: 1024px)`	데스크탑 이상일 때 적용
`xl:`	`@media (min-width: 1280px)`	대형 디스플레이
`2xl:`	`@media (min-width: 1536px)`	초대형 디스플레이

예: md:text-xl → 768px 이상일 때 text-xl 적용

🌙 다크모드 지원 클래스

Tailwind 클래스	CSS 대응값	설명
`dark:bg-gray-800`	`@media (prefers-color-scheme: dark) { background-color: #1f2937; }`	다크 모드에서 배경 색 변경
`dark:text-white`	`color: #ffffff;`	다크 모드에서 텍스트 색 변경

⚙️ 사용 전 tailwind.config.js에서 darkMode: 'class' 또는 'media' 설정 필요

🖱️ 상태 클래스 (Hover/Focus 등)

Tailwind 클래스	CSS 대응값	설명
`hover:bg-blue-600`	`:hover { background-color: #2563eb; }`	마우스 호버 시 배경 변경
`focus:outline-none`	`:focus { outline: none; }`	포커스 상태에서 테두리 제거
`active:scale-95`	`:active { transform: scale(0.95); }`	클릭 시 요소 축소 효과

⏱️ 트랜지션 & 애니메이션

Tailwind 클래스	CSS 대응값	설명
`transition`	`transition: all 150ms ease-in-out;` (기본값)	부드러운 상태 전환
`duration-300`	`transition-duration: 300ms;`	트랜지션 지속 시간
`ease-in-out`	`transition-timing-function: ease-in-out;`	트랜지션 가속도 조절
`animate-bounce`	`@keyframes bounce` 정의된 애니메이션 적용	요소가 위아래로 튀는 애니메이션

📐 기타 유용한 클래스

Tailwind 클래스	CSS 대응값	설명
`rounded-lg`	`border-radius: 0.5rem;`	모서리 둥글게
`shadow-md`	`box-shadow: 0 4px 6px rgba(...);`	중간 그림자 효과
`overflow-auto`	`overflow: auto;`	내용 넘칠 경우 스크롤 표시
`z-50`	`z-index: 50;`	쌓임 순서 조절
`cursor-pointer`	`cursor: pointer;`	마우스 커서를 포인터로 변경

Tailwind CSS는 익숙해지면 정말 빠르고 효율적으로 UI를 구축할 수 있게 해줍니다.
처음에는 클래스가 너무 많아서 어려워 보일 수 있지만, 몇 번만 사용해보면 금방 손에 익게 됩니다.

긴글 읽어주셔서 감사합니다! 🙌
허몽자니티였습니다!

jadeco

당신도요

이전 포스트

📝 Node.js 기초 강의

다음 포스트