반응형
웹디자인을 처음 시작하는 분도 쉽게 접근할 수 있는 CSS 프레임워크, TailwindCSS. 이 글에서는 완전 초보도 따라할 수 있는 TailwindCSS 기초 튜토리얼을 단계별로 정리했습니다. 기초적인 개념부터 설치, 스타일 적용, 반응형 디자인, 다크모드까지 모두 배워보세요.
1단계: TailwindCSS란?
TailwindCSS는 HTML 클래스만으로 빠르고 간결하게 스타일링할 수 있는 유틸리티 기반 CSS 프레임워크입니다. 반복적인 CSS 작성 없이 직관적인 UI 구성이 가능합니다.
2단계: 설치 방법
CDN 방식
<script src="https://cdn.tailwindcss.com"></script>테스트용이나 학습용으로 빠르게 시작하고 싶은 경우 적합합니다.
NPM 방식
npm install -D tailwindcss
npx tailwindcss init
CSS 입력 및 빌드 명령:
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
3단계: 텍스트 스타일링
<h1 class="text-2xl font-bold text-blue-600">Tailwind 시작!</h1>
4단계: 레이아웃 구성 – Flex & Grid
Flexbox
<div class="flex justify-between items-center"> ... </div>
Grid
<div class="grid grid-cols-3 gap-4"> ... </div>
5단계: 버튼 만들기
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded">
버튼 예제
</button>
6단계: 반응형 디자인 적용
<p class="text-sm md:text-lg lg:text-xl">반응형 텍스트</p>
모바일 우선(Mobile First) 접근 방식으로 다양한 디바이스에 최적화된 스타일을 제공합니다.
7단계: 다크모드 적용
// tailwind.config.js
module.exports = {
darkMode: 'class',
}
<body class="dark">
<div class="bg-white dark:bg-black text-black dark:text-white">다크모드 콘텐츠</div>
</body>
마무리
이번 글에서는 TailwindCSS의 기본 개념부터 설치, 스타일 적용, 반응형 구성, 다크모드까지 핵심 기초를 배웠습니다.
오늘 학습한 내용을 바탕으로 만든 화면은 아래 이미지와 같습니다. 전체 코드도 같이 올렸습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailwindCSS 기초 튜토리얼 예제</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<!-- 3단계: 텍스트 스타일링 -->
<section class="mb-8">
<h1 class="text-4xl font-bold text-blue-600 mb-2">TailwindCSS 시작하기</h1>
<p class="text-gray-700 text-lg">유틸리티 클래스로 빠르게 스타일링하는 방법을 배워보세요.</p>
</section>
<!-- 4단계: 레이아웃 구성 -->
<section class="mb-8">
<h2 class="text-2xl font-semibold mb-4">레이아웃 구성 예제</h2>
<!-- Flexbox 예제 -->
<div class="flex justify-between items-center bg-white p-4 rounded shadow mb-4">
<div class="text-gray-800">왼쪽 콘텐츠</div>
<div class="text-gray-800">오른쪽 콘텐츠</div>
</div>
<!-- Grid 예제 -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded text-center">그리드 1</div>
<div class="bg-blue-200 p-4 rounded text-center">그리드 2</div>
<div class="bg-blue-300 p-4 rounded text-center">그리드 3</div>
</div>
</section>
<!-- 5단계: 버튼 디자인 -->
<section>
<h2 class="text-2xl font-semibold mb-4">버튼 디자인 예제</h2>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-6 rounded">
클릭하세요
</button>
</section>
</body>
</html>다음 글에서는 실제 프로젝트에서 Tailwind를 어떻게 적용하는지 살펴보겠습니다.
반응형
'개발' 카테고리의 다른 글
| 실무에 바로 적용 가능한 TailwindCSS 튜토리얼 (1) | 2025.06.13 |
|---|---|
| 웹디자인 입문자를 위한 TailwindCSS 튜토리얼 가이드 (0) | 2025.06.12 |
| 2025년 최신 TailwindCSS 튜토리얼, 시작부터 마스터까지 (0) | 2025.06.11 |
| TailwindCSS 튜토리얼: 완전 초보도 따라할 수 있는 설치부터 활용까지 (0) | 2025.06.11 |
| Vibe Coding이란? 2025년 AI 기반 개발의 완전한 가이드 (5) | 2025.06.10 |
