Tailwind CSS

최종 수정 : 2024-06-01

Tailwind CSS

Utility-first 라는 방법론으로 디자인을 적용하는 라이브러리 중에서 가장 널리 쓰이는 CSS 라이브러리이다. class name을 컴포넌트가 아니라 기능에 붙임으로써 CSS의 문제를 해결하려 했다. Bootstrap과 유사하게 미리 정의된 스타일 구성 요소를 가져와 사용하는 방식으로 동작한다. 대신 utility CSS이므로 필요에 따라 확장성 있게 CSS를 작성할 수 있고, 빌드 시에 사용하지 않는 클래스는 제거되어 번들 크기에 주는 영향도 줄일 수 있다. 또한, atomic한 특성으로 인해 프로젝트의 크기가 거대해져도 스타일시트의 크기가 비례해서 늘어나지 않는 이점도 있다.

 

SSR 관점에서 중요한 건 런타임에 스타일시트를 생성하지 않고 빌드 타임에 스타일시트를 가져오는 방식이라는 점이다. 때문에 SSR에서도 추가적인 설정 없이 작동할 수 있다.

 

# 장점

CSS 클래스를 나누는 기준을 컴포넌트나 디자인이 아닌 작은 단위의 CSS 속성으로 두기 때문에, CSS 클래스 이름 충돌에 대한 걱정이 없다.

보편적으로 사용하는 CSS 클래스를 여러 컴포넌트에서 공유하기 때문에, 규모가 큰 프로젝트더라도 CSS 코드의 양이 굉장히 적다.

CSS-in-JS와 마찬가지로 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어 관리하기 좋다.

 

# 단점 및 한계

복잡한 디자인을 적용할 때에는 CSS 클래스가 한없이 길어져 가독성이 떨어지고 관리하기 어렵다.

-> 이를 해결하기 위해 @apply 문법으로 추상화를 지원하기도 한다.

 

단위테스트가 불가능하다.

왜일까?

 

# 설치 방법

1) Tailwind CSS IntelliSense

CSS 스타일링 코드를 좀 더 쉽게 작성할 수 있도록 돕는다.

 

2) 헤드윈드(Headwind)

테일윈드 CSS 관련 코드를 이해하기 쉬운 순서로 재배치해 주는 프로그램

 

3) PostCSS

VSCode는 @tailwind 규칙이 표준이 아닌 까닭에 테일윈드 CSS의 @tailwind base;와 같은 CSS 구문을 만나면 경고 메시지를 출력한다. 이 불필요한 경고 메시지를 없애준다.

---

참고 자료

https://careerly.co.kr/comments/70061

김의중 / CSS-in-JS 의 대안 Css-in-CSS Tai... | 커리어리

https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블

https://tailwindcss.com/docs/utility-first

Utility-First Fundamentals - Tailwind CSS

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS