2. Tailwind CSS 이해와 의의

Tailwind CSS의 이해

 

Tailwind CSS 는 미리 생성된 클래스를 HTML에 요소의 스타일을 지정하는 방식으로, 제한된 기본 유틸리티 클래스들로 복잡한 컴포넌트를 구축합니다.

일반적인 스타일 적용 방식

 

스타일을 적용하는 다양한 방식이 존재하지만 기본적인 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;
    align-items: center;
    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;
  }
  .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 CSS 스타일 적용 방식

 

Tailwind CSS를 사용하면 기존 클래스를 HTML에 직접 적용하여 요소의 스타일을 지정할 수 있습니다. CSS 를 작성하지 않고 유틸리티 클래스를 사용하여 맞춤형 디자인을 구축할 수 있습니다.

 

<!--  Tailwind CSS 스타일 적용 방식 예제  -->
<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>

장점

 

• 일일이 클래스 이름을 만들 필요가 없습니다.
• CSS 를 추가로 작성할 필요가 거의 없습니다.
• 적은 css 파일 용량과 그로 인한 성능 향상을 기대할 수 있습니다.
• CSS는 전역적이기 때문에 생기는 의도치 않은 스타일 변경이 있을 수 있지만, Tailwind CSS 를 사용하여 각 요소에 필요한 클래스만 적용하므로 다른 문제가 발생할 염려 없이 변경할 수 있습니다.

단점

 

반복되는 유틸리티 클래스 조합 관리의 어려움

 

<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>

해결방안

• 컴포넌트 단위 혹은 부분적으로 개발
• 다중 커서 편집 및 단순 루프와 같은 편집기 및 언어 기능 사용

 

---

 

참고

https://tailwindcss.com/docs/utility-first