💬 Tailwind CSS란?
Tailwind CSS는 클래스를 조합해서 스타일을 완성하는 유틸리티 퍼스트 CSS 프레임워크입니다.
❗ 기존 CSS처럼 class="btn"으로 선언하고 외부에서 스타일을 연결하는 방식이 아니라, HTML 안에서 바로 스타일을 조립합니다.
✅ 왜 Tailwind를 쓸까?
▪ 유지보수 편리: 컴포넌트마다 독립적으로 스타일 적용 (충돌 없음)
▪ 빠른 작업 속도: 별도 CSS 작성 없이 즉시 스타일링
▪ 일관된 디자인: 디자인 시스템 없이도 일관된 결과 가능
▪ 반응형 간편: tablet:, desktop: 등으로 미디어쿼리 처리
⚙️ 사용 방법 요약
1. 설치 (Next.js 기준)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p2. tailwind.config.js 설정
과거 프로젝트에서 사용한 config 일부 발취
3. 전역 스타일에 적용
@tailwind base;
@tailwind components;
@tailwind utilities;📌 이제부터 className에 tailwind 유틸리티 클래스를 쓰면 바로 스타일이 적용된다!
💡 자주 쓰는 Tailwind 유틸리티 모음
📏 여백 관련
| 클래스 | 설명 |
|---|---|
p-4 | padding: 1rem |
pt-2 | padding-top: 0.5rem |
m-6 | margin: 1.5rem |
mx-auto | 가로 중앙 정렬 (margin-left/right: auto) |
🎨 색상 및 배경
| 클래스 | 설명 |
|---|---|
bg-blue-500 | 배경색: 파란색 (중간톤) |
text-gray-800 | 글자색: 진한 회색 |
hover:bg-red-300 | hover 시 배경색 변경 |
dark:bg-gray-900 | 다크모드 대응 배경색 |
🧱 레이아웃
| 클래스 | 설명 |
|---|---|
flex, grid | 플렉스/그리드 레이아웃 설정 |
justify-center | 가로 방향 가운데 정렬 |
items-center | 세로 방향 가운데 정렬 |
gap-4 | 요소 간 간격: 1rem |
🖼️ 크기와 반응형
| 클래스 | 설명 |
|---|---|
w-full, h-screen | 전체 너비/화면 높이 |
max-w-[500px] | 최대 너비 500px 제한 |
tablet:px-8 | 태블릿 이상에서 패딩 좌우 2rem |
desktop:grid-cols-3 | 데스크탑에서 3열 그리드 설정 |
✨ 버튼 스타일 조합 예시
- 자주 쓰는 버튼/카드 스타일은 컴포넌트 분리 + className으로 전달
- 조건부 스타일은 clsx, twMerge 등 활용
clsx는 너무 좋다 코드를 간결하게 만들어 주는 마법쟁이! 👍👍👍
🧰 실무에서 유용한 Tailwind 유틸 꿀조합
| 상황 | 클래스 조합 |
|---|---|
| 중앙 정렬 | flex justify-center items-center |
| 가로 카드 그리드 | grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 gap-6 |
| 플로팅 버튼 | fixed bottom-10 right-10 z-50 |
| 스크롤 가능한 박스 | overflow-auto max-h-[300px] |
| 다크모드 대응 | bg-white dark:bg-gray-900 |
🧩 마무리하며 – Tailwind는 레고다.
Tailwind CSS는 단순히 클래스를 외우는 도구가 아니라, 스타일과 구조를 명확하게 분리하고, 재사용 가능한 UI를 빠르게 만드는 방법이다.
처음에는 조금 복잡해 보일 수 있지만, 유틸리티 클래스를 조합하고, 직접 컴포넌트를 정의하면서 Tailwind는 작업 속도를 눈에 띄게 끌어올려 줄 것이다!!!.
