[CSS] Tailwind CSS의 핵심 컨셉

최현규·2022년 1월 9일

공식 문서를 기반으로 최근 많이 사용되고 있는 CSS프레임워크인 tailwindcss의 핵심적인 개념에 대한 이해도를 높이기 위한 목적으로 작성된 글입니다.

유틸리티 클래스 기반의 CSS

Bootstrap등의 CSS프레임워크와 같이 CSS 파일을 따로 작성하지 않고, 미리 정의된 유틸리티 클래스들을 HTML 태그에 클래스로 부여하는 것을 통해서 스타일을 구현하는 프레임워크입니다. 이러한 방식으로 인해 다음과 같은 특징을 가집니다.

적용할 스타일의 클래스 이름을 생각하지 않아도 됩니다.
HTML태그안에 바로 사용되므로 CSS파일을 따로 작성하지 않습니다.
HTML태그에 local하게 적용되므로 스타일 변경 시 전체적인 레이아웃에 가는 영향을 크게 생각하지 않아도 됩니다.
인라인 스타일링과 달리 호버링, 포커싱, 미디어 쿼리 등의 구현도 추가적인 CSS를 작성하지 않고 구현할 수 있습니다.
동일한 속성을 변경하고자 할 때 멀티커서로 동시에 속성을 바꾸는 것을 통해 여러 요소의 스타일을 한 번에 변경할 경우 이점이 있습니다.

다양한 CSS 기능에 대한 대응

CSS의 가상 클래스, 가상 요소, 미디어 쿼리, 속성 선택자를 사용해야 할 경우에도 추가적인 CSS작성 없이 유틸리티 클래스로 쉽게 구현할 수 있습니다. 추가적으로 가상 클래스와 미디어 쿼리를 동시에 사용해야 하는 등의 상황에서 :를 통해 중첩하여 적용할 수도 있습니다.

가상 클래스 사용 예시(:hover :focus :active ...)

<button class="bg-violet-500 hover:bg-violet-400 active:bg-violet-600 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

가상 요소 사용 예시(::after)

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-gray-700">
    Email
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-gray-300 placeholder-gray-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

<!--custom css로 구현하면 다음과 같은 방식으로 표현해야됩니다.-->
span::after {
  content: "*",
  margin-left: 5px,
  color: red,
  ...
}

이 외에도 자주 사용하게 되는 다크모드에 관련된 옵션이나 파일 업로드 기능을 하는 버튼, prefer-reduced-motion 속성을 조작하는 등의 기능도 유틸리티 클래스로 구현되어 쉽게 적용할 수 있습니다.
공식 페이지의 다양한 modifier에 대한 예시 : https://tailwindcss.com/docs/hover-focus-and-other-states?email=choifrance%40gmail.com

스타일의 재사용성 극대화

tailwindcss는 재사용성을 높이기 위한 다양한 옵션 및 디렉티브 등을 제공합니다. 아래는 그 예시들로 추가적인 기능들 역시 존재합니다.

반복을 통해 동일한 스타일을 공유하는 컴포넌트의 경우 작성해야할 HTML의 양을 크게 줄일 수 있습니다. 아래는 사용자의 프로필 이미지를 여러 개 작성해야 할 경우의 예시입니다.

<div class="mt-3 flex -space-x-2 overflow-hidden">
    {#each contributors as user}
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="{user.avatarUrl}" alt="{user.handle}"/>
    {/each}
</div>

프로젝트 내에서 자주 사용되는 스타일 클래스가 존재하거나 사용자가 임의로 스타일 클래스를 만들고 싶은 경우 tailwind에서 제공하는 @apply 디렉티브를 통해 유틸리티 클래스를 새롭게 정의할 수 있습니다. 아래는 .btn-primary라는 클래스를 사용자가 커스텀하여 정의하는 예시입니다.

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

커스텀 스타일

타 유틸리티 클래스 기반 CSS프레임워크와 달리 보다 세부적인 내용에 대해 사용자 정의 커스텀이 가능하다는 특징이 있습니다. 'tailwind.config.js' 에 작성된 기본 값들을 변경하는 것을 통해서 커스텀하는 방식이기 때문에 변경이 간단하고 기본적인 기능들을 그대로 사용할 수 있으며, 변경 이후에 레이아웃에 문제가 생길 확률이 적습니다.

속성에 임의의 값을 넣을 수 있는 옵션이 존재합니다. 이를 활용하여 텍스트의 크기, 색, 마진 등을 특정한 부분에 대해서만 임의의 값을 사용해야 되는 경우 쉽게 대응할 수 있습니다. 예를 들어 배경으로 사용한 이미지를 원하는 위치에 가져다 놓기 위해서 위에서부터 123px 떨어트려야 한다면 다음과 같이 작성해주면 됩니다.

<div class="top-[123px]">
  <img ...>
</div>

특정한 색을 써야 한다거나 텍스트의 크기를 특정 부분만 다르게 할 경우에도 다음과 같이 적용할 수 있습니다.

<div class="bg-[#bada55] text-[22px]">
  <!-- ... -->
</div>

플러그인을 통해 커스텀 스타일을 추가하는 기능이 존재합니다. CSS파일이 아닌 플러그인을 import하는 것으로 커스텀 스타일을 가져옵니다.

Tailwind CSS의 장/단점

상술된 특징들로 인하여 tailwindcss프레임워크는 아래와 같은 장/단점을 가집니다.

장점

CSS파일을 따로 작성하지 않거나 특수한 경우에만 작성하므로 구조가 간단해진다.
유틸리티 클래스를 숙지하고나면 스타일 구현 속도가 빠르다.
타 유틸리티 클래스 기반 프레임워크보다 커스텀할 여지가 많다.
일관성 있는 스타일을 구현하기 편하다.
자주 쓰이는 다양한 옵션들이 구현되어 있어 편리하게 사용할 수 있다.
사용되지 않는 클래스들을 빌드 시 포함하지 않는 최적화 기능이 존재한다.

단점

스타일을 많이 적용해야 하는 경우 HTML태그 내의 클래스가 복잡해져 구별하기 어려울 수 있다.
HTML과 CSS파일이 구분되어 있지 않은 것은 장점이자 단점이 될 수 있다.
유틸리티 클래스 기반의 CSS특성 상 CSS의 자유도가 제한될 수 밖에 없으므로 특정한 방식(자유도가 높은)으로 구현하고자 하는 목표가 있다면 사용하지 않는 것이 좋다.