Tailwind CSS

Tailwind CSS

# 시작하며

오늘은 현재 프론트엔드 인턴으로서 근무하며 사용하고 있는 Tailwind CSS에 대해 정리해보려 한다. 현재 많은 실무에서 Tailwind CSS를 적극적으로 도입하고 있으며, 다양한 장점들로 인해 개발 속도가 확실히 빨라지는 효과를 경험해 볼 수 있었다. 무엇보다 클래스 이름을 직관적으로 각각 설정하고, 스타일 시트를 옮겨가며 *context switching을 할 필요가 없어서 좋았다. 또한 페이지를 생성한 후, 수정 작업을 진행할 때 코드를 한눈에 파악이 가능할 수 있어 스타일 수정에 시간 단축을 할 수 있었다.

*context switching - 현재 진행하고 있는 Task(process, thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽어 적용하는 과정

그렇다면 이러한 Tailwind CSS란 어떤 것일까?

# Tailwind CSS

Tailwind CSS는 utility first 컨셉을 가진 CSS 프레임워크이다. 흔히 사용하는 부트스트랩과 유사하게, p-10, flex 등과 같은 미리 세팅되어 있는 유틸리티 클래스를 활용하는 방식으로 별도의 CSS 파일을 생성할 필요 없이, HTML 코드 내에서 스타일링이 가능하다.

<p className="flex justify-center py-2 px-4 rounded-[8px] bg-red-600">
  hi
</p>

• Tailwind CSS의 장점

Utility-First
- utility first 컨셉은 Tailwind의 대표적인 특징이자 가장 큰 장점이라고 할 수 있다. 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링하는 특징을 가지고 있다. 따라서 앞서 언급했듯이, CSS 파일을 별도로 분리하여 파일을 이동하면서 번갈아 코드를 작성하는 수고를 하지 않아도 되는 것이다. 물론 원하는 태그에 대한 스타일 적용을 위해 직관적인 클래스 명을 만들 필요도 없으며, 해당 클래스 명을 검색하며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다. 이러한 장점을 가진 Tailwind CSS로 코드를 작성하면 자연스레 개발 시간도 단축되는 효과를 볼 수 있다.

일관적인 디자인

- 위 사진은 HTML 태그 내에서 사용하는 Tailwind CSS 코드 중, background 색상을 설정하는 코드 중 일부이다. 코드가 사용 목적에 따라 직관적으로 작성되어 있어 효율적 사용이 가능하고, 모든 곳에서 동일한 색상과 사이즈, 간격 등의 *유틸리티 클래스를 사용하므로 일관적인 스타일로 구현이 쉬워진다.

*유틸리티 클래스 - instance method와 instance 변수를 제공하지 않고, 정적 method와 변수만을 제공하는 클래스(비슷한 기능의 method와 상수를 모아서 캡슐화)

자유로운 커스터마이징
- 기본적으로 정의되어 있는 테마를 확장시키는 것이 가능하며, 새로운 속성 추가도 가능하다. 또한 다른 프레임워크에 비해서 기본 스타일 값을 디테일한 부분까지 커스텀이 가능하고, 디자인의 일관성을 해치지 않는다. 따라서 다크 모드도 지원이 가능한데, dark: 와 같이 프리픽스 방식으로 지원하고 있다.

JS와 분리
- Tailwind CSS는 JS와 완전히 분리되어 있다. 따라서 개발 도중 JS 프레임워크를 변경하더라도, 추가 작업 없이 기존의 HTML 코드를 사용할 수 있다.

• Tailwind CSS의 단점

가시성이 떨어지는 코드

- 아무래도 가장 큰 단점이라고 할 수 있는 것은 가시성이 떨어지는 코드이다. 스타일 코드가 HTML 태그 내부에 작성되어 직관적으로 이해할 수 있지만, 가독성이 좋다고 하기엔 어려움이 있다. 해당 부분이 아마도 Tailwind CSS에서 계속해서 고민하고 해결해야 할 부분인 것 같다. (Headwind와 같은 플러그인을 활용해 가독성을 높일 수 있다.)

너무 많은 클래스명
- 또 하나의 단점은, 로우 레벨의 스타일을 제공하기 때문에, 거의 모든 스타일의 유틸리티 클래스를 학습해야 한다. 실제로 나도 개발을 진행하며 font size나 weight을 설정할 때, 동일한 코드이지만 사용할 때마다 기억이 나질 않아 계속해서 문서를 참고하는 수고를 겪고 있다.. (Intelli Sense 플러그인을 사용하여 불편을 줄일 수 있다.)

CSS 속성의 우선순위 문제
- Tailwind CSS는 클래스가 출현한 빈도 / 순서에 관계없이 정의한 순서에 따라 스타일을 구성한다. (twin.macro를 통해 class에 선언된 여러 클래스 중, 마지막에 위치한 클래스를 최종적으로 적용시킬 수 있다.)

특정 프리픽스는 모든 CSS 속성을 지원하지 않음
- 우리가 사용하던 hover: / focus: 등의 특정 프리픽스는 일부 속성만 사용이 가능하다. 따라서 모든 속성을 지원하기 위해서는, 커스터마이징을 통해 추가 설정을 넣어주어야 한다. (Variantrs)

완성된 스타일 / 컴포넌트 쉽게 제공 및 사용 불가
- 다른 CSS 프레임워크처럼 완성된 스타일을 손쉽게 제공받아 사용하기 번거롭다. 하지만 본인이 필요한 것만 사용하고, 불필요한 것은 제거하며 직접 구현의 의존도가 높은 경우에는, 효율이 높은 효과를 볼 수 있다.

JS 코드 사용 불가
- 클래스명을 *분기 처리하여 동적으로 스타일링을 설정할 수는 있지만, JS 변수 값에 따라 번거로운 설정이 필요하다.

*분기 - 선택적으로 코드를 실행시킬 수 있는 것