Tailwind CSS이란?

TailwindCSS이란?

Tailwind란 컴포넌트 위주의 디자인 대신 HTML 문서에 저수준의 유틸리티 클래스를 정의하는 것으로 디자인을 구성할 수 있다.

• 부트스트랩같이 기존 디자인을 빠르게 가져와서 구성할 수는 없음
• 커스터마이징이 아주 편하고, 직관적임

 

실제 코드

Tailwind를 사용하지 않은 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>

---

Tailwind를 사용한 CSS

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

사전에 만들어진 디자인의 컴포넌트나 기능을 빠르게 가져와서 사용할 수 있도록 만들어진 프레임워크가 아니다. 그 대신, CSS의 각 속성들을 직관적이고 효과적으로 사용할 수 있도록 만들 수 있다.

 

장점

1. 학습 난이도가 낮다.
2. 정확하게는, CSS만 알고 있다면 누구나 빠르게 사용할 수 있다. 대부분의 클래스들이 단순히 각 스타일 속성의 축약형이나 다름없기 때문에, 클래스의 이름만 봐도 무슨 역할을 하는지 한눈에 알 수 있다. 또한 각 클래스마다 대부분 1~2개, 많아봐야 3~4개의 스타일 속성만을 가지고 있어 매우 단순하다.
3. 재사용성이 높다.
4. 대부분의 스타일 속성, 수치들이 클래스로 정의되어 있기 때문에, 중복되는 스타일 속성들을 일일히 적어줄 필요 없이 계속 클래스로 재사용이 가능합니다.
5. 따라서 유지보수가 편리하다.Tailwind는 직관적인 클래스가 HTML 태그에 인라인으로 박혀 있기 때문에 개별 수정이 용이하다. 또 스타일을 변경할 때 다른 태그의 스타일에 대해서 전혀 걱정할 필요가 없다는 것도 큰 장점이다.
6. 기존에는, CSS 디자인을 유지보수하려면 해당 HTML 태그의 스타일이 어떤 CSS 코드에서 왔는지를 먼저 찾아봐야 했다. 복잡한 프레임워크 테마의 경우에는 파일 여러개를 찾아보면서 수정하는 등 번거로웠다.
7. 반응형 디자인도 어렵지 않다.
8. Tailwind에서 반응형 디자인은 클래스명 앞에 md:, lg: 등의 미디어 쿼리를 대체하는 접두사를 붙임으로써 구성할 수 있다.

---

[참고]

https://velog.io/@jinsu2504/tailwind-1