Tailwind: 스타일링 시간을 단축하는 CSS 프레임워크

Tailwind 는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 차세대 CSS 프레임워크입니다. 기존에는 Bootstrap, Styled-components 을 많이 사용했는데 현재는 개발 생산성이 높은 Tailwind 가 대세로 자리잡고 있습니다.

• Utility-First 를 지향하는 CSS 프레임워크입니다.
  - Utility-First : 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링
• CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.
  스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다.

예시 - Tailwind 적용 전 ( 공식문서 기준 )

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

---

• 예시 - Tailwind 적용 후 ( 공식문서 기준 )

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

---

• 장점
  - 클래스의 이름을 고민하지 않아도 됩니다.
  - 쉽게 반응형 페이지를 구현할 수 있도록 지원합니다.

  • 기본적으로 제공하는 BreakPoint가 존재하기 때문에 복잡한 반응형 디자인도 쉽게 구현할 수 있습니다.
  • 따로 커스터마이징이 가능합니다.
    - 기본 정의된 테마를 확장할 수도 있고 새로운 속성을 추가할 수 있습니다.
  • 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능합니다.
    - 공식문서가 매우 친절하고 학습 난이도가 낮습니다.
  • 다크 모드 지원
    - dark: 프리픽스 방식으로 지원 ( 스타일을 직접 추가 하는 방식 )
    - 조금 불편한 방법일 수도 있지만 모듈화가 잘 이루어지면 나중에 dark 클래스 추가만으로도 손쉽게 다크모드를 적용할 수 있습니다.
  • Tailwind CSS 공식 커뮤니티가 존재하며 컴포넌트 또는 완성된 페이지들도 제공합니다.

• Tip
  - VS Code 를 사용할 경우 Tailwind CSS IntelliSense 플러그인 추천

  • 자동완성 기능
  • 잠재적인 오류나 버그 발견

사용후기

SSAFY 에서 1학기 관통 프로젝트로 영화 추천 페이지를 제작할 때 처음 사용했습니다. Bootstrap 을 대다수 사용하는데 색상이 마음에 들지 않아서 찾다가 카카오 FE 개발팀에서 적극적으로 도입하고 있다는 것을 알게 되어 저도 도입해봤습니다.

직접 Tailwind 를 경험해본 바로는 개발 속도가 빨라지는 장점이 크게 와닿았습니다. 스타일 시트를 오가는 컨텍스트 스위칭도 없고, 클래스 이름을 시맨틱하게 정하기 위해 고민해야 하는 시간도 사라졌습니다. 페이지를 수정할 때도 CSS가 어떻게 적용되었는지 한 눈에 파악할 수 있어 스타일 수정에 드는 시간도 단축되었습니다.

개발 생산성 측면에서 효율적이고 빠르게 디자인을 구현할 수 있도록 도와주고 스타일 수정이 쉬워서 유지 보수성 측면에서도 Tailwind 가 우수하다고 느꼈습니다. 기존의 스타일링 방식으로 다시는 돌아가지 못할 것 같다고 느꼈기에 추후에도 계속 Tailwind 를 사용할 것이고 여러분에게도 추천합니다.

설치 및 세팅

• Tailwind CLI 사용
  - tailwind.config.js 파일 자동 생성

npm install -D tailwindcss
npm tailwindcss init

• tailwind.config.js
  - 적용할 모든 템플릿 파일 경로 추가

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

• src/app.css 파일에 Tailwind 지시문 추가

/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• 빌드하기

npm run start

• 적용되었는지 예시로 체크해보기

/* App.js */
export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

• 이후부터는 CSS 를 따로 설정하지 않아도 클래스 이름만 가지고 꾸밀 수 있게 됩니다 !