Tailwind CSS 라이브러리 소개

TOC

• 들어가며
• 사전 지식
• prettier-plugin-tailwindcss
  • 개요
  • Prettier Plugin을 왜 써야 할까요?
  • 설정
  • 정렬 순서
• tailwind-merge
  • 개요
  • tailwind-merge를 왜 써야 할까요?
  • 설치
  • 사용법
• clsx
  • 개요
  • clsx를 왜 써야 할까요?
  • 설치
  • cn 함수
• twin.macro
  • 개요
  • twin.macro를 왜 써야 할까요?
  • 선택하지 않은 이유
  • References
• 마치며
  • 시리즈 1부를 마치다
  • 시리즈 2부는 말이죠

들어가며

Tailwind CSS 딥다이브와 Tailwind CSS 확장 프로그램 소개에 이어, 이번 글에서는 Tailwind CSS를 더 잘 쓰기 위한 라이브러리들을 알아보겠습니다.

사전 지식

이는 해당 프로젝트에 한정하여 extension들의 setting을 설정할 수 있고, 이 설정값은 같은 프로젝트를 다루는 모든 개발자들에게 공통적으로 적용됩니다. 설명의 편의를 위한 예시이므로 .vscode/settings.json 파일에 추가하는 것은 상황에 따라 구분해주시기 바랍니다.

prettier-plugin-tailwindcss

tailwindcss는 추천 class 순서에 따라 클래스가 자동 정렬되도록 하는 공식 Prettier Plugin을 지원합니다.

개요

• docs: Automatic class sorting with Prettier
• commit: Install: prettier-plugin-tailwindcss

Prettier Plugin을 왜 써야 할까요?

tailwindcss에서 추천하는 순서에 따라 자동으로 classNames를 정렬해줍니다. 감히 필수 중의 필수인 라이브러리라고 할 수 있습니다.

설정

우선 prettier와 prettier-plugin-tailwindcss를 설치합니다. -D는 --save-dev의 줄임말로, 개발 의존성으로 설치한다는 뜻입니다.

# bash
pnpm install -D prettier prettier-plugin-tailwindcss

이제 프로젝트 루트에 .prettierrc 파일을 생성하고 아래 내용을 추가합니다.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

정렬 순서

• 컴포넌트 클래스가 가장 먼저 오고, 그 다음 유틸리티 클래스가 배치됩니다.
• 다른 클래스를 override하는 클래스가 항상 이후에 배치됩니다.
• box model > layout에 영향을 주는 요소들로 시작 > decoration과 관련된 클래스 순서로 배치됩니다.
• 기본 유틸리티 이후 hover:, focus:, active: 등의 클래스가 배치됩니다.
• md:, lg: 등의 반응형 modifier가 작은 순서에서 큰 순서까지 그룹으로 배치됩니다.
• 커스텀 클래스는 가장 처음에 배치됩니다.

정렬 순서의 자세한 예시는 How classes are sorted 문서를 참고해주세요.

tailwind-merge

개요

• docs: tailwind-merge
• commit: Install: tailwind-merge

tailwind-merge를 왜 써야 할까요?

tailwindcss를 사용하다 보면, className의 순서대로 override가 먹히지 않습니다. 뒤쪽에 오는 className으로 덮어 씌워져야 할 것 같은데 말이죠. 그래서 이런 문제를 해결하는 라이브러리입니다. 자세한 건 tailwind-merge - what is it for 부분을 참고해주세요.

설치

pnpm install tailwind-merge

현재는 Tailwind v4이지만, 만약 Tailwind v3를 사용하고 계시다면 특정 버전을 사용하셔야 합니다. 문서를 참고해주세요. (참고: tailwind-merge v2.6.0)

사용법

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red-500 hover:bg-red-700', 'p-3 bg-blue-500')
// → 'hover:bg-red-700 p-3 bg-blue-500'

우리의 기대처럼 후순위에 자리한 className의 속성으로 override됩니다.

좋은 점은 tailwindcss에서 p-3와 px-2는 다르게 취급되는데, 예를 들면, className이 px-2 p-3이더라도 padding: 12px 8px처럼 계산될 수 있는 거죠. 하지만 tailwind-css를 사용하면 같지만 다른 유틸리티들을 사용자의 기대처럼 덮어버립니다. (참고: Allow refinements)

이 밖에도 다양한 tailwind-merge의 기능은 Features 페이지를 참고해주세요.

clsx

개요

• docs: clsx
• commit: Install: clsx

clsx를 왜 써야 할까요?

clsx는 공식문서의 Usage만으로도 사용의 이유를 명확히 설명할 수 있습니다.

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

정리하면 대략 이렇습니다.

• 다양한 타입 구성(단순 문자열, 배열, 객체, 혼합)
• 조건적 구성 + 객체 형태 지원
• falsy값(0, undefined, false 등) 무시
• 강력한 nesing 구조 분해 및 평탄화(flatten) 지원

설치

pnpm install -D clsx

cn 함수

참고로 코드 제공형 라이브러리로 2024년 트렌드였던 shadcn/ui는 Tailwind CSS 기반인데, 컴포넌트를 설치하면 자동으로 아래의 코드를 만들어 줍니다.

// lib/utils.ts

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

이 코드는 이 clsx와 앞서 소개된 twMerge를 엮어서 사용하는 방식입니다. 정리하면 아래 2가지 이점을 취하기 위함입니다.

• tw-merge : className의 올바른 병합(merge, overriding)을 위하여
• clsx : className의 구성 타입과 조건부 구성을 위하여

twin.macro

개요

• docs: twin.macro

twin.macro를 왜 써야 할까요?

styled-components, emotion 등 css-in-js와 함께 유연하게 tailwindcss를 혼용하기 위해 사용합니다.

선택하지 않은 이유

여기부터는 선택의 영역입니다. 저는 사용하지 않기로 선택했어요.

• css-in-js의 경우 SSR을 지원하지 않거나 별도로 고도의 설정을 해줘야 하기 때문입니다.
• 또한 자체 문법을 가지고 있는데, 편의성과 가독성을 가질 수 있게 되지만 그만큼 AI 친화성에서 멀어지게 됩니다.
• Next15 등 최신 버전의 환경에서는 제대로 동작하지 않을 수 있습니다.

References

사용을 결정할 때 많은 포스트를 참고했습니다. 관심 있으신 분들은 아래 포스트를 참고해주세요.

• Tailwindcss를 소개합니다.(with. twin.macro+emotion)
• 카카오 FE 기술 블로그 - FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
• 카카오 FE 기술 블로그 - Tailwind CSS 사용기

마치며

시리즈 1부를 마치다

여기까지 Tailwind CSS를 회사 프로젝트에서 사용하기 위한 PoC(Tailwind CSS 딥다이브)와 더 편하게 쓰기 위한 VS Code 확장 프로그램들(Tailwind CSS 확장 프로그램 소개)에 이어 라이브러리까지 알아봤어요.

시리즈 2부는 말이죠

다음 시리즈는 Tailwind CSS의 자체 config 설정 및 customization 방법을 정리할 계획이에요. 또한 제가 터득하거나 이미 유명한 사용 팁들을 소개해볼 계획도 있고요.

다만, 추가적인 조사와 내용 정리보다는 하루 빨리 뛰어들어야 하는 시점이 되어서 시리즈를 나눠 쉬어갈 예정입니다. 조금 더 실전에 부딪히며 알아낸 좋은 내용으로 글을 이어가겠습니다.

도움이 되길 바라겠습니다. 감사합니다.