[ 살펴보기 ] TailwindCSS - Concepts

Frontend 개발시 application을 구성하는 UI 작업을 하는데는 여러가지 방법이 있다. Plain CSS또는 SCSS와 같은 Pre-processor를 사용하여 UI 작업을 하거나 Emotion과 같은 CSS-in-JS library를 통해 styled-component를 통해 UI을 구성하거나 MUI, Ant Design과 같이 미리 만들어진 styled-component를 제공하는 library를 통해 작업할 수도 있을 것이다.

반면 TailwindCSS는 class utility를 제공함으로서 palin css를 사용할 필요없이 TailwindCSS가 제공하는 class utility만으로도 UI 작업을 할 수 있게 해준다.

다음 예제를 살펴보자.

<div className="p-5">
  <h1 className="text-xl font-bold">Title</h1>
</div>

위의 예제에서 div element에 적용한 p-5 class utility는 padding:20px을 적용하는 것과 같고 h1 element에 적용한 text-xl과 font-bold class utility는 font-size:20px과 font-weight:700을 적용하는 것과 같다.

Plain CSS 또는 SCSS와 같은 Pre-processor를 사용하여 UI 작업을 하면 특정 element에 대한 class name을 선정하고 해당 class name에 style을 적용한다.

반면 tailwindcss는 위의 예제에서 볼 수 있듯이 각각 다른 역할을 하는 class utility를 class로 제공함으로서 style을 적용한다. 그렇기에 각 element의 class name으로 추상화된 style을 일일이 확인하지 않고도 class utility 이름을 통해 어떤 스타일이 적용되는지 파악할 수 있다.

아래는 간단한 card ui를 만들기 위한 tailwindcss code다.

<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="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">Title</div>
    <p class="text-slate-500">a new message!</p>
  </div>
</div>

Tailwind 코드는 처음 접해본다면 class가 너무 많아 지저분하다고 느낄 수도 있을 것이다.하지만 application 규모가 커지고 관리해야 할 코드가 많아질 수록 각 element 마다 class name을 지정하여 style을 적용하는 방법보다 tailwind와 같은 접근은 더욱더 빛을 발한다.

또한 frontend 작업을 할 때 대부분의 경우 React, Vue와 같은 framework를 통해 작업을 하고 또한 대부분의 UI logic은 component 단위로 추상화 되므로 tailwind의 적용이 유지보수면에서도 크게 문제될 점은 없다고 본다.

Tailwind는 element에 특정 style만 적용 하는 것 외에 해당 element의 hover, focus와 같은 action에 따라 style을 변경할 수 있는 방법을 제공한다. 아래 예제는 button을 hover 했을 때 저 진한 green으로 button의 background color를 변경한다.

<button className="bg-green-200 hover:bg-green-600">
  Hover here
</button>

Responsive 작업이 필요하다면 아래의 예제와 같이 작업할 수 있다. 아래 코드는 viewport가 breakpoint md size보다 작으면 text-sm size를 적용하고 breakpoint md 보다 크면 text-base size를 그리고 breakpoint lg 보다 크면 text-xl 사이즈를 적용하고 있다.

<p className="text-sm md:text-base lg:text-xl">
  Contents
</p>

위에서 간략히 소개한 기능 외에 tailwind가 default로 제공하는 theme을 custom theme으로 변경하여 적용한다거나 default theme에 원하는 추가 속성을 확장해 사용할 수도 있다.

Tailwind를 통해 어떤 작업을 할 수 있는지는 개별 포스트를 통해 보다 자세히 살펴보자.