[Tailwind] 테일윈드 CSS 프레임워크 기본 사용법

 

Tailwind CSS는 HTML에 직접 유틸리티 클래스를 작성하여 스타일을 적용하는 Utility-first CSS 프레임워크이다.

기존 CSS처럼 별도의 스타일 파일을 작성하지 않고, 미리 정의된 클래스를 조합하여 빠르게 UI를 구성할 수 있다는 점에서 많은 개발자들에게 사랑받고 있다.

이 글에서는 Tailwind CSS의 기본 개념부터 자주 사용하는 클래스까지, 실무에 바로 적용할 수 있도록 자세히 설명한다.

---

🧩 Tailwind CSS의 핵심 개념

• Utility-first: 스타일을 구성하는 작은 단위의 클래스를 조합하여 UI를 만든다.
• 모듈화된 클래스: p-4, bg-blue-500, text-center 등 직관적인 클래스 이름으로 구성된다.
• 반응형, 상태 기반 스타일 지원: hover:, md: 등의 접두사를 통해 다양한 상황에 대응할 수 있다.

---

🧪 기본 클래스 사용 예시

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

• p-4: padding 1rem
• bg-blue-500: 배경색 파랑 (500 단계)
• text-white: 텍스트 색상 흰색
• text-center: 텍스트 가운데 정렬
• rounded: 모서리 둥글게
• shadow-md: 중간 그림자

---

📐 자주 사용하는 유틸리티 클래스

✅ 여백 (Margin & Padding)

클래스	설명
m-4	전체 마진 1rem
p-2	전체 패딩 0.5rem
mx-auto	좌우 마진 자동 (가운데 정렬)
px-4	좌우 패딩 1rem
py-2	상하 패딩 0.5rem

 

✅ 정렬 및 레이아웃

클래스	설명
flex	Flexbox 활성화
justify-center	가로 중앙 정렬
items-center	세로 중앙 정렬
grid grid-cols-3	3열 그리드 구성
gap-4	그리드 간격 1rem

 

✅ 텍스트 스타일

클래스	설명
text-lg	텍스트 크기 크게
font-bold	굵은 글씨
text-gray-700	회색 텍스트
uppercase	대문자 변환
tracking-wide	자간 넓게

 

✅ 색상 설정

클래스	설명
bg-red-500	배경색 빨강
text-white	텍스트 색상 흰색
border-blue-300	테두리 색상 파랑
hover:bg-blue-600	마우스 오버 시 배경색 변경

---

📱 반응형 디자인

Tailwind는 모바일 퍼스트 접근 방식을 사용하며, 다음과 같은 접두사를 통해 반응형 스타일을 적용할 수 있다.

접두사	화면 크기 기준
sm:	≥ 640px
md:	≥ 768px
lg:	≥ 1024px
xl:	≥ 1280px
2xl:	≥ 1536px

 

예시:

<p class="text-base md:text-xl lg:text-2xl">
  반응형 텍스트 크기
</p>

---

🌙 다크 모드 지원

Tailwind는 다크 모드를 기본 지원하며, dark: 접두사를 사용하여 스타일을 지정할 수 있다.

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  다크 모드 지원 박스
</div>​

• tailwind.config.js에서 darkMode: 'class' 또는 'media'로 설정해야 한다.

---

🧠 상태 기반 클래스

클래스	설명
hover:bg-blue-600	마우스 오버 시 배경색 변경
focus:outline-none	포커스 시 테두리 제거
active:scale-95	클릭 시 요소 축소 효과
disabled:opacity-50	비활성화 시 투명도 조절

---

🎬 트랜지션 및 애니메이션

클래스	설명
transition	기본 트랜지션 적용
duration-300	지속 시간 300ms
ease-in-out	가속도 조절
animate-bounce	튀는 애니메이션

---

🧰 기타 유용한 클래스

클래스	설명
rounded-lg	모서리 둥글게 (0.5rem)
shadow-md	중간 그림자
overflow-auto	넘칠 경우 스크롤 표시
cursor-pointer	마우스 커서 포인터로 변경
z-50	z-index 설정

---

🏁 마무리

Tailwind CSS는 처음에는 클래스가 많아 보일 수 있지만, 몇 번만 사용해보면 금방 익숙해진다.

특히 빠른 프로토타입 제작, 일관된 디자인 시스템 구축, 반응형 UI 구현에 매우 유용하다.