Tailwind CSS는 class만으로 디자인을 완성하는 유틸리티 퍼스트CSS 프레임워크입니다.
CSS 파일을 수정할 필요 없이,
필요한 스타일을 바로 class로 적용할 수 있습니다.
1) Tailwind CSS란?
Tailwind는 아래처럼 HTML 태그에 클래스를 넣어서 즉시 스타일이 적용되는 방식입니다.
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
클릭하기
</button>2) Tailwind CSS 장단점
2.1) 장점
- 빠른 개발
<div class="w-40 h-40 bg-red-300 rounded-xl"></div>- 커스텀 CSS 작성 시간 감소
<nav class="flex items-center justify-between px-4 py-3">
...
</nav>UI 일관성 유지
토큰처럼 미리 정해진 spacing, color를 사용하므로 파편화가 적다.
2.2) 단점
- class가 길어져 가독성이 떨어짐
<div class="flex flex-col gap-3 bg-white shadow-lg p-6 rounded-xl border border-gray-300 hover:bg-gray-50 transition">3) 시작하기
3.1) create a Project
npm create vite@latest my-project
cd my-project3.2) install tailwind css
npm install tailwindcss @tailwindcss/vite3.3) plugin
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})3.4) import Tailwind CSS
@import "tailwindcss";3.5) start the proejct
npm run dev3.6) start using tailwind CSS in your html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>4) 단위 체계 (px, rem, spacing scale)
- spacing scale 예시 (기본)
w-4 → 1rem → 16px
w-10 → 2.5rem → 40px
사용 예제
<div class="w-4 h-4 bg-black"></div>
<div class="w-10 h-10 bg-blue-300"></div>px 사용도 가능
<p class="text-[18px]">커스텀 PX 텍스트</p>rem 사용
<div class="mt-[1.2rem]">rem 예제</div>5) 배경/테두리/라운드 클래스
- background (bg)
<div class="bg-green-400 w-20 h-20"></div>- border + border-color
<div class="border border-gray-500 w-20 h-20"></div>- rounded
<div class="rounded-lg bg-blue-200 w-20 h-20"></div>ex)
<div class="bg-white border border-gray-300 rounded-xl w-32 h-32"></div>6) width, height, padding, margin
- width, height
<div class="w-40 h-20 bg-pink-300"></div>- padding (p), margin (m)
<div class="p-6 m-4 bg-yellow-200">패딩, 마진 예제</div>- 방향별
<div class="px-4 py-2 mt-6 mb-3 bg-purple-200">방향 지정</div>7) 텍스트 관련 클래스
- text-color
<p class="text-gray-700">그레이 텍스트</p>- text-size
<p class="text-xl">큰 텍스트</p>- font-bold
<p class="font-bold">볼드 텍스트</p>- cursor
<button class="cursor-pointer">버튼</button>8) Flex 관련 클래스
- 기본 flex
<div class="flex gap-4">
<div class="w-10 h-10 bg-red-400"></div>
<div class="w-10 h-10 bg-blue-400"></div>
</div>- flex-col
<div class="flex flex-col gap-3">
<div class="bg-green-300 p-2">A</div>
<div class="bg-green-400 p-2">B</div>
</div>- justify & items
<div class="flex justify-between items-center bg-gray-200 p-4">
<span>로고</span>
<button class="bg-blue-500 text-white px-3 py-1 rounded">버튼</button>
</div>9) hover + transition
- hover
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Hover me
</button>- transition
<div class="w-20 h-20 bg-red-400 hover:bg-red-500 transition"></div>- 속성 지정
<div class="transition-all duration-300 hover:scale-105"></div>더 자세한 사용법은 공식 홈페이지를 참조하길 바랍니다.
열심히 하장