Tailwind - 기본 개념

아래 내용은 개인 학습을 위해 Tailwind의 Documentation을 번역한 내용입니다.

Tailwind

🔗 Tailwind 바로가기

테마 기능 구현을 위해 테스트 해본 Tailwind

Utility-First

미리 강제로 정의해둔 원시 유틸리티 모음으로 복잡한 컴포넌트를 제작합니다.

전통적으로 웹에서 스타일을 설정할 때마다 작성하는 CSS는 아래와 같습니다.

❌ 디자인 변경시 CSS 커스텀을 필요로하는 전통적인 접근방식입니다.

<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>

테일윈드는 미리 만들어진 클래스를 HTML에 바로 작성하는 것 만으로 엘리먼트를 스타일링할 수 있습니다.

⭕️ 유틸리티 클래스를 사용하면 CSS를 작성하지 않아도 변경된 디자인을 적용할 수 있습니다.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>

위 예에서 사용된 클래스명:

• flex, flex-shrink-0, p-6 : 카드 레이아웃을 제어 하기 위해 Tailwind의 flexbox 와 padding 유틸리티 사용
• max-w-sm, mx-auto: 카드 가로 사이즈를 제어하고 수평 가운데 정렬을 위해 max-width와 margin 유틸리티 사용
• bg-white, rounded-xl: 카드 외형을 스타일링 하기 위해 background color, border radius, box-shadow 유틸리티 사용
• w-12, h-12: 로고 이미지 사이즈를 지정하기 위해 width와 height 유틸리티 사용
• space-x-4: 로고와 텍스트 사이 간격을 핸들링하기 위해 space-between 유틸리티 사용
• text-xl, text-black, font-medium, etc.: 카드 텍스트 스타일링을 위해 font size, text color, font-weight 유틸리티 사용

이러한 접근방식은 별도의 커스텀 CSS를 한 줄도 작성하지 않고도 완전히 새로운 컴포넌트 디자인을 적용할 수 있습니다.

실제로 시도를 해보기 전까지는 정말 끔찍한 아이디어라고 생각할 수 도 있겠어요.

하지만, 이 방식으로 실제 무언가를 구축하면 다음과 같은 중요한 이점을 빠르게 얻을 수 있습니다.

• 클래스 이름을 짓는데 에너지를 낭비하지 않습니다. 무언가를 스타일링하기 위해 sidebar-inner-wrapper 같은 바보같은 이름을 추가하지 않고, 단지 유연한 컨테이너에 대해 완벽한 추상적인 이름에 대해 더이상 고민하지 않아도 됩니다.
• CSS는 더이상 커지지 않습니다. 기존 방식을 사용하면 새 기능을 추가할 때마다 CSS 파일이 더 커집니다. 유틸리티로 모든것을 재사용할 수 있으므로 새로운 CSS를 작성할 필요가 거의 없습니다.
• 코드 수정을 더 안전하다 느낍니다. CSS는 전역적이고 무언가 변경할 때 어떤 부분이 깨질지 완벽하게 알고 있을 수 없습니다. HTML에 있는 클래스는 로컬이므로 다른 변경에 대한 걱정 없이 클래스를 수정할 수 있습니다.

미리 정의된 유틸리티 클래스가 있는 HTML에서 독점적으로 작업할 수 있는 생산성을 알게되면 다른 방식으로 작업하는 것은 피곤한 느낌일 것입니다.

그저 인라인 스타일을 사용하지 않는 이유?

이러한 작업 방식에 대한 일반적인 반응은 "이거 그냥 인라인 스타일 아니야?" 입니다. 그리고 어떠한 면에서는 클래스를 할당하고 그 클래스를 스타일링 하는 대신 직접 요소에 스타일을 적용하고 있습니다.

하지만 유틸리티 클래스를 사용하는것은 인라인 스타일을 넘어서는 주요한 이점을 갖고 있습니다.

• 제약 조건이 있는 디자인. 인라인 스타일을 사용하면 모든 값은 매직넘버(의미 없이 고정되어 변경할 수 없는 값)가 됩니다. 유틸리티를 사용하면 시각적으로 일관된 UI를 훨씬 쉽게 만들 수 있는 미리 정의된 디자인 시스템에서 스타일을 선택할 수 있습니다.
• 반응형 디자인. 인라인 방식으로 미디어 쿼리를 사용할 수는 없지만, 테일윈드의 반응형 유틸리티를 사용하여 완전하게 반응형인 인터페이스를 쉽게 만들 수 있습니다.
• Hover, focus와 그 외 상태 디자인. 인라인 스타일은 hover나 focus와 같은 상태를 선택할 수 없지만, 테일윈드의 상태 베리에이션은 유틸리티 클래스와 함께 이러한 상태를 쉽게 스타일링할 수 있도록 합니다.

유지보수 문제

utility-first 접근 방식을 사용할 때 가장 큰 유지 보수 문제는 일반적으로 반복되는 유틸리티의 조합을 관리하는 것입니다.

일반적으로 템플릿 부분(template partials) 또는 컴포넌트(components)를 추출하면 쉽게 해결할 수 있습니다.

<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>

또한 테일윈드의 @apply 기능을 사용하여 공통 유틸리티 패턴에 대한 CSS 추상화를 만들 수 있습니다.

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

그 외에도, HTML이 CSS보다 훨씬 더 쉽게 유지보수 될 수 있기 때문에 utility-first CSS 프로젝트를 유지하는것이 대형 CSS 코드 베이스를 유지하는 것보다 훨씬 더 쉬운 것으로 밝혀졌습니다.

이 방식에 대한 다른 사용자의 경험을 듣고싶다면 다음 자료를 참고하세요.

• By The Numbers: A Year and a Half with Atomic CSS by John Polacek
• Building a Scalable CSS Architecture by Sarah Dayan of Algolia
• Diana Mounter on using utility classes at GitHub, a podcast interview

추가로 더 많은 정보를 위해 John Polacek 의 The Case for Atomic/Utility-First CSS 도 확인해 보시기 바랍니다.