Tailwind CSS 사용해보기

요즘 핫한 CSS 프레임워크가 뭘까요? 라는 질문을 주시면
저는 당연히 Tailwind CSS라고 말씀드릴 것 같습니다.

(2022/08/24 기준, 위에 사진에서 Tailwind CSS 그래프가 붉은색입니다)

Tailwind CSS란?

Tailwind CSS가 강조하는 개발 방식은 HTML에 벗어나지 않고 한 화면에서 모든 스타일을 구현하는 것입니다.

 <!-- display: inline-block, position: relative -->
 <!-- w-8은 32px이며 숫자 1마다 4px의 값을 가집니다. h는 높이입니다. -->
<div className="inline-block relative w-8 h-6">
    ...
<div/>

위는 Tailwind CSS, 아래는 styled-components를 사용할 때 쓰는 방식의 코드입니다.

<HamMenu>
    ...
</HamMenu>

const HamMenu = styled.div`
  display: inline-block;
  position: relative;
  width: 32px;
  height: 24px;  
`;

흔히 styled-components를 사용하여 개발할 때는 컴포넌트 관심사의 분리와 별개로
HamMenu를 스타일 컴포넌트 전용 폴더를 만들어서 분리할 것인가 사용하는 컴포넌트에 같이 배치할 것인가로 개발 방식이 나뉩니다.

Tailwind CSS는 HTML Class에 CSS 선언을 끝내고 위 내용의 개발 방식에서 벗어납니다.

하지만 Tailwind CSS 코드의 첫인상을 보셨을 때 분명 불안한 점이 있으셨을 겁니다.

CSS 코드가 길어지면 가독성이 엉망이 될 것 같은데?

맞습니다. 예를 들어,

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <!-- Heroicon name: solid/chevron-down -->
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>
      ...
</button>

공식 문서 Component의 코드입니다. 긴 코드들을 보시면 성향에 따라 호불호가 갈리기 시작합니다.
제 주관적인 의견은 Tailwind CSS의 가독성에 적응한다는 것은 애매하게 알고 있던 영어 단어나 문장을 이해하는 것과 비슷하다고 생각합니다.

흔히 Bootstrap을 쓰는 분들은

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

이런 코드들에 적응하셨습니다. class 방식의 스타일을 접해오셨던 분이라면 부담감이 덜하겠다고 생각됩니다.

Tailwind CSS도 아래 코드로 Bootstrap이나 material-ui와 비슷하게 item 사이즈를 제어할 수 있습니다.

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>

Tailwind CSS만의 스타일을 더 세부적으로 살펴보면

Font Size

<div className="text-xs">...</div>
font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */

Box Shadow

 <div className="shadow-sm">...</div>
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

Background Color

 <button className="bg-slate-50"></button>
background-color: rgb(248 250 252);

이런식으로 간단하게 스타일을 정의할 수 있습니다.

Directives

제 개인적으로 Tailwind CSS에서 가장 헷갈리는 문법이었습니다.

Tailwind CSS는 친절하게도 Next.js, Gatsby, Nuxt.js, SvelteKit 같은 프레임워크, 라이브러리별로 설치 가이드를 제공합니다.

공식 문서의 설치 가이드

설치 문서에서 전역 스타일 파일의 맨 윗줄 코드들이 눈에 띄실 겁니다.

<!-- globals.css -->
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind variants; // optional

@tailwind는 directive로써 base, components, utilities로 된 3가지 고유한 Bucket으로 구성됩니다.

3가지 버킷에 대해 알아보기 전에 먼저 @layer directive에 대해 짚고 넘어가야 합니다.

@layer: 저희가 커스텀 한 스타일의 버킷을 Tailwind CSS에 알려줍니다.

Bucket

base: HTML 기본 (h1, p와 같은), reset rules에 적용된 기본 스타일을 위한 layer입니다.

<!-- globals.css(next.js 기준) -->
@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

component: class 기반 스타일을 선언하는 layer이며, third-party components를 스타일링할 때 유용합니다. 또한 밑에서 익히는 utilities layer로 덮어씌울 수 있습니다.

@layer components {
 .bg-black {
    background: black;
  }
}

utilities: 다른 스타일을 덮어쓰는 일회용 class를 표현하는 layer입니다. Tailwind CSS에서 제공하는 기본 utilities가 없을 때 사용합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

@apply

  h1 {
    @apply text-2xl;
  }

위와 아래 코드는 서로 동일합니다.

h1 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

@apply는 보통 Bucket 예제의 코드들을 순수 css나 scss로 정의해주는 것이 아닌 HTML Tag 클래스에 붙여주던 Tailwind CSS 문법을 사용할 때 쓰입니다.

결론

편리하다!! 그래도 가독성은..

 

Tailwind CSS의 공식 문서를 읽으면서 가독성 해결에 대해 회피한다는 느낌을 받았지만
사실 가독성 해결은 HTML 코드에 모든 스타일을 선언한다는 장점을 없애는 것으로 이어질 수 있기 때문에 trade-off라고 생각하게 되었습니다.
처음에는 특이한 문법으로 인해 당황스럽게 받아들여질 수 있지만 익숙해진다면 엄청난 생산성 향상을 누릴 수 있습니다.
공식문서를 살펴보시면 글에서 언급된 문법뿐 아니라 더 많은 것들을 학습하실 수 있습니다.
저는 기존에 styled-components를 주로 쓰던 프로젝트에서 Tailwind CSS로 옮기는 작업을 시도했었는데 상당한 시간이 소요되어 새로 만드는 게 낫겠다는 느낌을 받았습니다.
그래도 새로운 프로젝트를 시작한다면 무조건 Tailwind CSS를 사용할 것 같습니다!