반응형
TailwindCSS는 요즘 가장 인기 있는 유틸리티 퍼스트 CSS 프레임워크 중 하나입니다. 이 글에서는 초보자도 쉽게 따라할 수 있는 TailwindCSS 설치 방법부터 활용 예제까지 단계별로 알려드립니다.
TailwindCSS란?
TailwindCSS는 HTML 클래스만으로 스타일을 직접 지정할 수 있는 CSS 프레임워크입니다. 부트스트랩처럼 미리 정해진 컴포넌트를 사용하는 것이 아니라, 스타일을 직접 조합해 원하는 디자인을 구현하는 방식입니다.
장점 요약:
- 빠른 개발 속도
- 높은 유연성
- 반응형 디자인 지원
TailwindCSS 설치 방법 (2025년 기준)
1. CDN 방식 (빠르게 체험)
HTML에 아래 코드 한 줄만 추가하면 바로 사용 가능합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello Tailwind!</h1>
</body>
</html>테스트나 학습용으로 간단하게 시작하고 싶은 분께 추천합니다.
2. NPM 방식 (프로젝트용)
npm install -D tailwindcss
npx tailwindcss init
tailwind.config.js를 다음과 같이 설정합니다:
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
};
input.css 파일에 지시문 추가:
@tailwind base;
@tailwind components;
@tailwind utilities;
최종 빌드 명령어:
npx tailwindcss -i ./input.css -o ./output.css --watch
TailwindCSS 사용 예제
텍스트 스타일링
<p class="text-xl text-blue-600 font-semibold">TailwindCSS는 정말 쉬워요!</p>
버튼 디자인
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
클릭하세요
</button>초보자를 위한 실전 팁
- VSCode에서 TailwindCSS IntelliSense 확장을 설치하면 클래스 자동완성 기능을 쓸 수 있습니다.
- 반응형 디자인을 위해 sm, md, lg, xl 브레이크포인트를 연습해보세요.
- 자주 쓰는 스타일은 컴포넌트화해서 반복 작업을 줄일 수 있습니다.
마무리하며
TailwindCSS는 처음에는 낯설 수 있지만, 몇 번만 사용해 보면 그 편리함과 속도에 익숙해질 것입니다. 이번 글에서는 설치부터 활용 예제까지 기본을 정리했으며, 다음 포스트에서는 실무에서 자주 쓰이는 Tailwind 컴포넌트 설계 방법을 소개하겠습니다.
추천 글:
반응형
'개발' 카테고리의 다른 글
| 웹디자인 입문자를 위한 TailwindCSS 튜토리얼 가이드 (0) | 2025.06.12 |
|---|---|
| 단계별로 배우는 TailwindCSS 기초 튜토리얼 (0) | 2025.06.12 |
| 2025년 최신 TailwindCSS 튜토리얼, 시작부터 마스터까지 (0) | 2025.06.11 |
| Vibe Coding이란? 2025년 AI 기반 개발의 완전한 가이드 (5) | 2025.06.10 |
| Claude Code 완벽 가이드: GitHub Copilot vs OpenAI 비교 분석 (4) | 2025.06.06 |
