"디자인 딸깍", Tailwind 를 사용해봅시다.

Tailwind CSS는 유틸리티-퍼스트(Utility-First) 방식의 CSS 프레임워크입니다.

'mt-4', 'bg-blue-500' 같은 작은 클래스를 조합해 U를 만들기 때문에, 디자인 시스템을 빠르게 일관되게 적용할 수 있습니다.

전통적인 "BEM + SCSS"와 달리 별도 컴포넌트를 만들지 않아도 되고, 필요한 클래스만 빌드 시점에 추려내 번들 크기가 작습니다.

 

이걸 왜 써야하나요?

가끔 웹 개발하다보면 내가 디자이너인지 개발자인지 헷갈릴때가 있습니다.

코드는 10분만에 다 작성해놓고 CSS 를 30분 작성하고 그럴때요. 

그런 당신을 위해 만들어졌습니다. 바로 "Tailwind".

필요한 스타일을 작은 조각으로 바로바로 조립할 수 있고, 반응형이나 다크모드까지 한 줄로 관리할 수 있거든요. 

디자인 시스템을 통일하고 싶고, 개발에 더 집중하고 싶은 당신이라면 한번 드셔보십쇼. 

 

---

Tailwind 설치법

프로젝트 루트에서 다음을 실행합니다.

# 1. 패키지 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

그러면 tailwind.config.js와 postcss.config.js가 자동 생성 됩니다.

tailwind.config.js의 content배열에 템플릿 파일 경로를 지정해야 JIT 엔진이 사용된 클래스를 탐지합니다.

---

Tailwind 사용법

1. CSS 엔트리 파일(src/index.css 등)에 핵심 지시어를 넣는다.

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

2. HTML 또는 JSX에서 클래스를 붙여서 스타일을 완성한다.

export default function Hero() {
  return (
    <section className="flex flex-col items-center justify-center h-screen bg-gradient-to-b from-indigo-500 to-purple-600">
      <h1 className="text-4xl md:text-6xl font-extrabold text-white drop-shadow-lg">
        Hello tailwind!
      </h1>
      <p className="mt-4 text-white/80">
        유틸리티만으로 만든 반응형 히어로 섹션
      </p>
      <button className="mt-8 px-6 py-3 bg-white text-indigo-700 font-semibold rounded-lg shadow hover:scale-105 transition">
        시작하기
      </button>
    </section>
  );
}

 

'md:text-6xl', 'hover:scale-105'처럼 접두사만 붙이면 미디어쿼리나 상태 스타일이 자동 적용된다. 더 복잡한 재사용이 필요할때는 다음처럼 '@apply'를 써서 클래스를 묶을 수 있다.

/* src/styles/buttons.css */
.btn-primary {
  @apply bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700;
}

---

Tailwind의 장점

• 개발속도 UP: HTML 수정만으로 스타일 즉시 확인.
• 디자인 일관성: spacing/색상/폰트 등이 토큰화되어 실수 방지
• 빌드 최적화: JIT 모드가 사용된 클래스만 CSS에 포함 -> 번들 수 KB.
• 반응형/다크모드 간편: 'sm:', 'dark:' 같은 접두사 하나로 해결
• 풍부한 생태계: Headless UI, DaisyUI 등 컴포넌트 라이브러리 지원

---

Tailwind의 단점

• HTML 난독성: 클래스가 길어져 diff 가독성이 떨어질 수 있다.
• 관심사 분리 논쟁: 구조와 스타일이 한 파일에 뒤섞인다.
• 고급 효과 한계: 복잡한 애니메이션/pseudo 요소는 결국 커스텀 CSS 필요.
• 네이밍 오타=스타일 미적용: 자동 완성 플러그인이 사실상 필수

---

마무리

tailwind 는 "빠른 프로토타이핑 + 일관된 디자인 토큰"을 원하는 팀에 최적이다. 초기 설계 단계에서 도입하면 효율이 극대화되지만, 기존 코드베이스에 추가할 땐 범위를 명확히 나눠 유지보수 복잡성을 최소화해야 한다. 전통 CSS 접근과 비교해 장/단점을 이해하고, 프로젝트 규모/팀 문화에 맞추어서 선택합시다.

 

 

비슷한 다른 글

2025.04.17 - [Frontend Development] - Vite vs Webpack: 속도와 편리성 실험해봤습니다.

Vite vs Webpack: 속도와 편리성 실험해봤습니다.