카테고리 없음

Tailwind CSS 란? 설치해보기

dmscks3126 2025. 3. 13. 21:02

Tailwind CSS는 유틸리티 우선(utility-first) 방식의 CSS 프레임 워크로,

클래스명을 조합하여 스타일을 적용하는 방식을 제공한다.

 

일반적인 CSS나 Bootstrap 같은 프레임워크와 다르게

컴포넌트 스타일을 미리 정의하지 않고, 원하는 스타일을 직접 조합하여 적용하는 방식이 특징이다.

1. Tailwind CSS의 핵심 개념

✅ 유틸리티 클래스 기반 스타일링

Tailwind는 미리 만들어진 작은 유틸리티 클래스를 조합하여 스타일을 적용한다.
예를 들어, 일반적인 CSS로 아래처럼 스타일을 작성한다고 하면:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

 

Tailwind 에서는 이렇게 간결하게 적용할 수 있다.

<button class="bg-blue-500 text-white px-4 py-2 rounded-md">
  클릭하세요
</button>

이렇게 하면 별도의 CSS 파일을 만들지 않아도 되며, 빠르게 스타일을 적용하고 수정할 수 있다.

 

 

 

2. Tailwind CSS의 주요 특징

🎨 1) 미리 정의된 클래스 시스템

Tailwind는 기본적으로 미리 정의된 크기, 색상, 여백, 정렬 등의 스타일을 제공하여 개발자가 직접 값을 지정할 필요가 없다.

 

Tailwind 클래스                                      CSS 스타일

text-xl font-size: 1.25rem;
text-center text-align: center;
p-4 padding: 1rem;
bg-red-500 background-color: #ef4444;
rounded-lg border-radius: 8px;

 

⚡ 2) 빠른 스타일 적용 및 유지보수 용이

 

  • CSS를 따로 작성하지 않고 클래스만 추가하면 스타일 적용
  • 컴포넌트 스타일을 쉽게 조합하고 수정 가능
  • 불필요한 CSS 코드 작성 감소 → 생산성 향상

 

 

 

📱 3) 반응형 디자인 지원 (Responsive Design)

Tailwind는 반응형 디자인을 쉽게 적용할 수 있도록 sm, md, lg, xl 같은 반응형 프리픽스를 제공

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

 

  • sm:text-lg → 화면이 sm(640px) 이상이면 text-lg 적용
  • md:text-xl → 화면이 md(768px) 이상이면 text-xl 적용
  • lg:text-2xl → 화면이 lg(1024px) 이상이면 text-2xl 적용
  • xl:text-3xl → 화면이 xl(1280px) 이상이면 text-3xl 적용

💡 즉, 별도로 미디어 쿼리를 작성하지 않아도 Tailwind의 반응형 클래스만 추가하면 자동으로 적용됨!

 

 

🎯 4) 다크 모드 및 테마 기능 지원

Tailwind는 다크 모드와 테마 기능도 손쉽게 적용할 수 있다.

 

<html class="dark">
  <p class="text-black dark:text-white">
    다크 모드 지원!
  </p>
</html>

 

  • dark:text-white → 다크 모드일 때 텍스트 색상을 흰색으로 변경
  • text-black → 기본 모드에서는 검은색

 

 

3. Tailwind CSS 설치 방법 

1️⃣ CDN 방식 (빠른 테스트)

CDN을 사용하면 별도 설정 없이 HTML 파일에서 바로 사용 가능

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">Hello Tailwind!</h1>
</body>
</html>

 

 

2️⃣ 설치 방식 (실제 프로젝트에서 사용)

프로젝트에서 Tailwind CSS를 제대로 활용하려면 패키지를 설치해야 한다.

 

📌 설치 과정

1. Tailwind CSS 패키지 설치

npm install -D tailwindcss postcss autoprefixer

 

2. Tailwind 설정 파일 생성

npx tailwindcss init -p

 

 

3. tailwind.config.js 수정

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

4. CSS 파일에 Tailwind import

@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

5. React 또는 Vue에서 사용하면 끝!

 

 

 

4. Tailwind CSS와 일반 CSS 프레임워크 비교

비교 항목                      Tailwind                                                     CSSBootstrap

 

스타일 방식 유틸리티 클래스 조합 미리 정의된 컴포넌트 사용
커스터마이징 자유로움 (완전히 커스텀 가능) 제한적 (디자인 변경 어려움)
CSS 파일 크기 사용된 클래스만 포함 (작음) 미리 모든 스타일 포함 (큼)
반응형 디자인 sm, md, lg, xl 사용 row, col 시스템 사용
사용 편의성 처음은 익숙하지 않지만 유연함 빠르게 사용 가능하지만 커스터마이징 어려움

💡 Bootstrap은 정해진 디자인을 쉽게 적용하는 반면, Tailwind는 더 유연한 디자인이 가능하지만 처음엔 익숙해지는 데 시간이 필요합니다.

 

 

 

결론: Tailwind CSS를 언제 사용할까?

✔ 빠르게 디자인을 적용하고 싶을 때
✔ 자유로운 커스터마이징이 필요한 경우
✔ 컴포넌트 스타일을 재사용해야 할 때
✔ CSS 파일 크기를 최소화하고 싶을 때

📌 초반에는 익숙해지는 데 시간이 걸릴 수 있지만, 적응하면 UI 개발 속도가 크게 향상된다
📌 React와 함께 사용하면 더욱 강력한 컴포넌트 기반 스타일링이 가능

🎯 React + Tailwind CSS로 프로젝트를 진행하면 프론트엔드 개발 속도를 더욱 높일 수 있다