[CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점

Tailwind CSS 분석

[index]

1. Tailwind CSS란?

2. Tailwind CSS 장점

3. Tailwind CSS 단점

4.실제로 프로젝트에 적용해보며 느낀점

---

1. Tailwind CSS란?

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS는 utility-first  CSS 프레임워크로서 핵심 개념은 Utility-First Fundamentals입니다. 이는 제한된 기본 유틸리티 집합으로 복잡한 구성 요소를 구축하는 것을 의미합니다. 즉, 미리 정의된 utility classes 를 사용하여 스타일링을 하는 것이 Tailwind의 핵심입니다. 이는 개발자가 HTML을 벗어나지 않고도 웹사이트를 빠르고 효율적으로 구축할 수 있도록 지원합니다. 하지만 학습 난이도가 높고 CSS를 직접 작성하는 것에 비해 스타일링이 제한될 수 있다는 단점이 있습니다.

 

Tailwind CSS의 주요 장점은 다음과 같습니다.

• 빠른 개발: Tailwind CSS는 기존 CSS 프레임워크에 비해 웹사이트 개발 속도를 크게 향상시킬 수 있습니다.
• 가독성: Tailwind CSS 코드는 기존 CSS 코드에 비해 가독성과 유지 관리성이 뛰어납니다.
• 일관성: Tailwind CSS는 전체 코드베이스에서 일관된 스타일을 유지할 수 있도록 지원합니다.
• 유연성: Tailwind CSS는 다양한 종류의 디자인을 구축할 수 있는 유연한 프레임워크입니다.

 

2. Tailwind CSS의 장점

1. Utility-First의 편리함과 빠른 개발

Tailwind CSS는 HTML과 CSS를 따로 관리하지 않고, HTML에 스타일을 직접 적용할 수 있는 프레임워크입니다. 이를 통해 HTML과 CSS를 번갈아 가며 확인할 필요가 없어서 개발 속도를 높일 수 있습니다. HTML과 CSS를 따로 관리해야 하는 경우, HTML을 작성한 다음 CSS 파일을 열어서 스타일을 적용해야 합니다. 이 과정에서 화면을 번갈아 가며 확인해야 하기 때문에 시간이 소요됩니다. 하지만 Tailwind CSS를 사용하면 HTML에 스타일을 직접 적용할 수 있기 때문에 화면 전환이 줄어듭니다. 

 

2. utility classes를 활용하여 클래스 이름없이 스타일 적용

기존 CSS 프레임워크를 사용하면 스타일을 적용하기 위해 클래스 이름을 직접 지정해야 합니다. 하지만 Tailwind CSS는 미리 정의된 유틸리티 클래스를 제공합니다. 따라서 개발자는 원하는 스타일을 적용하기 위해 해당 클래스를 HTML 요소에 추가하기만 하면 됩니다. 이러한 방식은 클래스 이름을 지정하는 데 소요되는 시간을 줄일 수 있고, 팀원들 간에 일관된 스타일을 유지할 수 있습니다. 

 

예를 들어, 다음과 같은 HTML 코드를 작성한다고 가정해 보겠습니다.

<div class="container">
  <h1 class="text-center">제목</h1>
  <p class="text-gray-600">본문</p>
</div>

 

이 코드는 다음과 같은 스타일을 적용합니다.

• .container class: 컨테이너 요소에 배경색을 #fff, 패딩을 1rem, 마진을 0 0 1rem 0으로 설정합니다.
• .text-center class: 텍스트를 가운데 정렬합니다.
• .text-gray-600 class: 텍스트 색상을 #666으로 설정합니다.

이 코드를 Tailwind CSS를 사용하지 않고 작성하려면 다음과 같은 CSS 코드를 작성해야 합니다.

.container {
  background-color: #fff;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

.text-center {
  text-align: center;
}

.text-gray-600 {
  color: #666;
}

 

Tailwind CSS를 사용하면 이러한 CSS 코드를 다음과 같이 줄일 수 있습니다.

<div class="container text-center text-gray-600">
  <h1 class="text-center">제목</h1>
  <p class="text-gray-600">본문</p>
</div>

 

이처럼 Tailwind CSS를 사용하면 HTML과 CSS 코드를 간결하게 작성할 수 있습니다. 또한, HTML과 CSS를 번갈아 가며 확인할 필요가 없어서 개발 속도를 높일 수 있습니다.

 

3. Preflight 처리

Tailwind CSS는 미리 정의된 유틸리티 클래스를 사용하여 CSS를 작성합니다. 이러한 유틸리티 클래스는 브라우저의 기본 스타일과 충돌할 수 있습니다. 이를 방지하기 위해 Tailwind CSS는 Preflight 처리를 제공합니다. Preflight 처리는 브라우저의 기본 스타일을 무효화하거나 백지화하여 충돌을 방지합니다.

 

Preflight 처리는 다음과 같은 방법으로 수행할 수 있습니다.

• Tailwind CSS의 preflight 속성을 사용하여 특정 요소 또는 모든 요소에 대해 Preflight 처리를 활성화할 수 있습니다.
• Tailwind CSS의 default 키워드를 사용하여 특정 유틸리티 클래스에 Preflight 처리를 적용할 수 있습니다.

예를 들어, 다음과 같이 preflight 속성을 사용하여 모든 요소에 대해 Preflight 처리를 활성화할 수 있습니다.

<style>
  html {
    preflight: true;
  }
</style>

 

또는, 다음과 같이 default 키워드를 사용하여 text-center 유틸리티 클래스에 Preflight 처리를 적용할 수 있습니다.

<style>
  .text-center {
    default: text-align: center;
  }
</style>

 

Preflight 처리를 통해 브라우저의 기본 스타일과 Tailwind CSS의 스타일 간의 충돌을 방지할 수 있습니다. 이는 디자인 시스템을 따라 Tailwind CSS를 적용할 때 유용합니다.

 

4. 수월한 유지 관리

이미 언급한 바와 같이 Tailwind CSS는 미리 정의된 유틸리티 클래스를 사용하여 CSS를 작성합니다. 이러한 유틸리티 클래스는 컴포넌트의 HTML에 직접 적용되므로, CSS 파일을 수정할 필요가 없습니다. 따라서 스타일을 변경하려면 컴포넌트의 HTML 파일에서 클래스를 변경하기만 하면 됩니다. 이는 기존 CSS와 비교하여 유지 관리를 크게 쉽게 해줍니다. 기존 CSS에서는 스타일을 변경하려면 CSS 파일을 수정해야 합니다. 하지만 CSS 파일은 종종 복잡하고, 스타일이 어디에 사용되는지 파악하기 어려울 수 있습니다. 따라서 스타일을 변경하면 예상치 못한 결과가 발생할 수 있습니다. Tailwind CSS는 이러한 문제를 해결합니다. 미리 정의된 유틸리티 클래스를 사용하면 스타일이 어디에 사용되는지 명확하게 알 수 있으므로, 스타일을 변경해도 예상치 못한 결과가 발생할 가능성이 줄어듭니다.

 

5. 유틸리티 반복성 완화

Tailwind CSS는 미리 정의된 유틸리티 클래스를 사용하여 CSS를 작성합니다. 이러한 유틸리티 클래스는 종종 반복적으로 사용될 수 있습니다. 예를 들어, 스타일 된 목록 아이템이 여러 개 있다면 매번 많은 클래스 목록을 적용해야 할 수도 있습니다.

그러나 Tailwind CSS는 이러한 반복성을 완화하기 위한 몇 가지 기능을 제공합니다.

• 컴포넌트 추출: 코드 블록을 재사용해야 할 경우 프레임워크의 재사용 가능한 컴포넌트에 이를 추출할 수 있습니다. 이 방법을 사용하면 관련 구조적 HTML을 모든 스타일과 결합할 수 있습니다.
• @apply 기능: 여러 Tailwind 클래스를 하나의 사용자 정의 클래스로 결합할 수 있습니다. 이 기능을 사용하면 Tailwind의 이점을 기존 CSS 접근 방식과 결합할 수 있습니다.

 

6. 사용하지 않는 스타일 제거

기존 CSS 프레임워크는 스타일 시트에 모든 스타일을 포함합니다. 시간이 지남에 따라 사용되지 않는 스타일이 축적될 수 있습니다. 이는 페이지 로딩 속도를 느리게 하고 코드베이스를 복잡하게 만들 수 있습니다. Tailwind CSS는 사용되지 않는 스타일을 제거하여 이러한 문제를 해결합니다. Tailwind는 빌드 프로세스를 사용하여 CSS를 자동으로 생성합니다. 이 프로세스는 코드에서 사용되는 유틸리티 클래스만 포함하도록 CSS를 생성합니다. 이것은 두 가지 이점을 제공합니다. 첫째, 페이지 로딩 속도가 향상됩니다. 둘째, 코드베이스가 깨끗하고 유지 관리가 쉬워집니다. 결론적으로, Tailwind CSS는 사용되지 않는 스타일을 제거하여 페이지 로딩 속도를 높이고 코드베이스를 유지 관리하기 쉽게 만듭니다.

 

7. 일관성 있는 디자인 시스템

크고 복잡한 사이트를 구축하거나, 팀으로 프로젝트를 진행할 때, 또는 여러 페이지에 일관성있는 UI를 적용하는 과정을 쉽지 않습니다. Tailwind CSS는 미리 정의된 색상 팔레트, 간격, 글꼴, 너비 중단점 등을 제공합니다. 이러한 값을 사용하면 팀이나 여러 페이지에 걸쳐 일관된 스타일을 유지할 수 있습니다.

 

Tailwind CSS는 다음과 같은 방법으로 일관성 있는 디자인 시스템을 적용하는 데 도움을 줍니다.

• 미리 정의된 색상 팔레트
  Tailwind CSS는 11개의 색상과 10개의 음영을 제공합니다. 이러한 색상을 사용하여 웹 사이트의 전체 색상 스키마를 일관되게 유지할 수 있습니다.
• 미리 정의된 간격
   Tailwind CSS는 12, 14, 16, 20, 24, 32, 48, 64, 96, 128, 192, 256, 320, 480픽셀의 14가지 간격을 제공합니다. 이러한 간격을 사용하여 웹 사이트의 요소 간의 간격을 일관되게 유지할 수 있습니다.
• 미리 정의된 너비 중단점
   Tailwind CSS는 4개의 너비 중단점 (xs, sm, md, lg)을 제공합니다. 이러한 중단점을 사용하여 웹 사이트의 반응형 디자인을 일관되게 유지할 수 있습니다.
• 미리 정의된 글꼴
  Tailwind CSS는 Poppins, Roboto, Inter의 세 가지 글꼴을 제공합니다. 이러한 글꼴을 사용하여 웹 사이트의 전체 글꼴을 일관되게 유지할 수 있습니다.

물론 필요에 따라 이러한 값을 사용자 정의할 수 있습니다. 하지만 일반적으로 미리 정의된 값을 사용하면 일관된 디자인 시스템을 적용하는 데 도움이 됩니다.

 

8. 인라인 스타일에서 변형(variant)을 사용

인라인 스타일은 미디어 쿼리를 사용할 수 없습니다. 반응형으로 UI를 구현하려고 할 경우,  CSS의 다른 부분에 다른 선택자 그룹을 만들어야 합니다. 이러한 과정은 스타일 시트의 여러 섹션을 찾아서 편집해야해서 상당히 번거로울 수 있습니다. Tailwind는 각 변형(variant)에 대해서 다른 선택자를 만들지 않고도 이런 모든 종류의 스타일링을 인라인으로 수행할 수 있도록 해줍니다. 수많은 변형(variant)이 존재하며,  가이드 문서에서 예제와 함께 전체 목록을 확인할 수 있습니다.

 

9. 간단한 Responsive Design

Tailwind CSS는 미디어쿼리를 사용하지 않고도 반응형 디자인을 구현할 수 있습니다. 클래스 앞에 사이즈를 지정하여 뷰포트마다 요소의 스타일을 변경할 수 있습니다.

 

Tailwind CSS는 다음과 같은 방법으로 간단한 반응형 디자인을 지원합니다.

• 미리 정의된 너비 중단점
  Tailwind CSS는 4개의 너비 중단점 (xs, sm, md, lg)을 제공합니다. 이러한 중단점을 사용하여 웹 사이트의 반응형 디자인을 구현할 수 있습니다.
• 변형(variant)
  Tailwind CSS는 미디어쿼리와 함께 사용할 수 있는 변형을 제공합니다. 이러한 변형을 사용하여 뷰포트마다 요소의 스타일을 변경할 수 있습니다.
• mobile-first 원칙
   Tailwind CSS는 mobile-first 원칙을 따릅니다. 즉, 모바일 뷰포트에서 스타일이 먼저 적용되고, 더 큰 뷰포트에서 스타일이 추가로 적용됩니다.

다음은 Tailwind CSS를 사용하여 반응형 디자인을 구현하는 방법의 예입니다.

<div class="container mx-auto">
  <h1 class="text-center text-2xl sm:text-3xl lg:text-4xl">반응형 디자인</h1>
</div>

 

이 코드에서 text-2xl 클래스는 텍스트의 크기를 24px로 설정합니다. sm:text-3xl 변형은 뷰포트 너비가 768px 이상인 경우 텍스트의 크기를 32px로 변경합니다. lg:text-4xl 변형은 뷰포트 너비가 1280px 이상인 경우 텍스트의 크기를 48px로 변경합니다.

 

10. 자유로운 커스터마이징

Tailwind CSS는 미리 정의된 스타일 값을 제공하지만, 필요에 따라 이러한 값을 쉽게 커스텀할 수 있습니다. 커스텀을 할 때 기본 스타일 값을 수정하는 방식이므로, 디자인 일관성을 유지할 수 있습니다. 또한 수정한 스타일은 재사용이 가능합니다.

 

 

3. Tailwind CSS의 단점

1. 추가적인 빌드 프로세스 실행과정

원래 Tailwind는 가져올 수 있는 스타일 시트에 불과했지만, 최신 버전에서는 CSS를 생성하기 위해 빌드 프로세스를 실행해야 합니다. 이것은 웹 페이지를 만드는 과정에 약간의 추가 오버헤드가 있음을 의미합니다. 만약 프런트엔드 빌드 프로세스를 잘 모르는 경우, 새로운 개발자에게 엄청난 복잡성을 가중 시킬 수 있습니다. 다행히 이 프로세스는 이미 많은 프런트엔드 프레임워크에서 사용하는 빌드 프로세스에 잘 통합되어 있으며, Tailwind CLI를 사용하면 매우 쉽게 사용할 수 있습니다.

 

2. 추가적인 학습의 필요성

 CSS를 이미 이해하고 있다면 Tailwind를 사용하는 것은 편리하지만, CSS에 대한 부족한 이해를 보완하기 위해 Tailwind에 의존하는 것은 좋지 않은 생각입니다. 기본적으로 CSS 와 유사하지만 Tailwind CSS 규칙이 분명히 존재하기 때문에 클래스 이름, Tailwind의 다른 부분들이 어떻게 작동하는지 학습할 필요가 있습니다. 만약 이미 CSS를 알고 있다면, Tailwind를 빠르게 학습하고 사용할 수 있습니다. 하지만 기존에 제공되는유틸리티 클래스가 아닌 커스텀 스타일을 추구할 경우, 이 또한 추가적인 학습이 필요합니다. 다행히 Tailwind에는 필요한 것을 쉽게 찾을 수 있는 훌륭한 문서가 있습니다. 

 

3. 콘텐츠와 스타일 간의 관심사 분리 문제

Tailwindd CSS는 HTML과 CSS사이에 관심사의 분리가 이루어지지않아 의존도가 올라간다는 문제가 있습니다. 그리고 이러한 문제는 코드의 유지보수성을 저하시키는 원인이 될 수 있습니다. 하지만 Tailwind의 창시자인 Adam Wathan은 관심사의 분리가 현실 세계에서는 성립하지 않는 주장인지 설명하는 글을 작성했습니다. 문제는 복잡한 실제 프로젝트에서 CSS가 HTML에 의존하거나 HTML이 CSS에 의존하며 분리하기가 매우 어렵다는 것입니다. 이러한 부분은 개발자의 유연한 판단으로, 여러가지 장점들과 함께 고려하여 사용 여부를 판단하는 것이 좋을 것 같습니다.

 

4. 코드의 가독성 저하

위에서 언급한 문제와 이어지는 문제점이 바로 코드의 가독성 문제입니다. Tailwind CSS의 장점으로 코드 가독성을 언급했는데 단점으로도 코드 가독성이 언급되는 것이 의아하실 수도 있습니다. 간단한 코드의 경우 직관적으로 어떤 style을 적용했는지 바로 알아볼 수 있어 가독성이 좋지만,  관심사의 분리가 이루어지지 않아 스타일 코드가 길어질 수록 알아볼 수 없어지는 문제가 발생할 수 있습니다. 

 

5. HTML 크기 증가

유틸리티 우선 접근 방식은 종종 HTML에 많은 클래스를 추가하는 것을 포함하기 때문에, HTML의 다운로드 크기가 증가할 수 있습니다. 물론, CSS 클래스를 잘 분류하고, 사용하지 않는 클래스를 제거하는 등의 노력을 통해 HTML 크기를 줄일 수 있습니다. 또한, CSS 파일의 크기를 줄이기 위해 최적화 도구를 사용할 수도 있습니다.

 

Algolia의 Sarah Dayan은 그녀의 강연인 “유틸리티 우선 CSS에 대한 방어(Defense of Utility-First CSS)”에서 이 문제를 다루었습니다. 이 강연에서 그녀는 유틸리티 우선 접근 방식과 기존 페이지에서 사용하는 컴포넌트 접근법의 차이점을 시연했으며, 압축되지 않은 크기가 유틸리티 우선 방식일 때 약 20% 더 크다는 것을 발견했습니다. 하지만 일단 압축되면 그 차이는 단지 몇 퍼센트에 불과했습니다. 또한 CSS 문서는 컴포넌트 접근 방식으로 크기가 더 커졌고, 브라우저가 탐색하고 적용하기 위해 더 많은 처리가 필요한 더 복잡한 문서가 되었습니다. 따라서 Tailwind CSS의 HTML 크기 증가 문제는 최적화를 통해 일정부분 해결할 수 있습니다. 

 

예를 들어 CSS 클래스를 자주 사용하는 경우, 해당 클래스를 별도의 파일로 분리하여 저장하는 것이 좋습니다. 이렇게 하면 HTML 문서에서 해당 클래스를 참조할 때마다 전체 파일을 불러올 필요가 없어져, HTML 크기를 줄일 수 있습니다.

 

 

3. 실제로 프로젝트에 적용해보며 느낀점

제가 느낀 Tailwind CSS의 장점은 다음과 같습니다. 

 

1. 비교적 쉬운 학습 난이도

CSS에 대한 기본적인 이해도가 있다는 전제하에 빠르게 학습할 수 있는 CSS 프레임 워크라고 생각합니다. 프로젝트 투입이 되기 전  Tailwind를 사용해본 경험이 없었기 때문에 짧은 시간안에 학습하여 바로 실무를 수행해야 했습니다. 하지만 우려했던 것과 달리 빠르게 적응할 수 있었고 사용하면서 이전에 경험했던 Sass 또는 styled-components보다 편리하다는 생각을 했습니다. 함께 프로젝트를 진행했던 동료 또한 처음 접해보았지만 금방 적응한 것을 보면 학습 난이도가 높은 편은 아니라고 생각합니다.

 

2. 직관적인 코드

이전에 진행하던 프로젝트 버전을 이어서 새롭게 리뉴얼하는 작업을 진행하였습니다. 그 과정에서 전임자가 작성해둔 코드들을 분석해 수정할 일들이 많았는데 스타일 코드가 직관적이고 HTML과 하나로 작성되어 있어 이해하는데 큰 어려움이 없었습니다. 또한 직관적으로 읽고 바로 코드를 수정할 수 있어 빠른 속도로 코드를 작성하고 수정할 수 있었습니다. CSS 파일이 분리되어 있었다면 해당하는 파일을 찾아, 스타일 코드를 찾는 과정 또한 번거로웠을텐데 그 과정을 생략할 수 있어 개발 생산성 측면에서 만족스러웠습니다.

 

3. 협업 과정에서 편리하게 일관된 UI 구현 

기획이 계속 변경되는 상황에서 디테일한 컨벤션을 미리 정하고 개발을 진행하는 것이 불가능했습니다. 각자 맡은 부분을 개발하면서 수시로 맞춰가는 과정이 필요했습니다. 그때 유틸리티 클래스를 활용해 컬러 혹은 사이즈를 바로바로 정할 수 있어 일관성있는 UI 구현이 가능했습니다.  

 

4. 손쉬운 반응현 작업

Tailwind는 따로 반응형 작업을 위한 미디어 쿼리를 사용하지 않아도 반응형 작업을 수월하게 할 수 있습니다. 이를 활용하여 폰트 사이즈, 여백, 컨텐츠 정렬 등을 디테일하게 수치를 모두 계산하지 않고 빠르게 반응형으로 작업할 수 있어 편리했습니다.

 

5. Tailwind CSS에서 제공하는 styled components의 높은 활용도

Tailwind CSS는 바로 적용할 수 있는 다양한 컴포넌트 스타일을 제공하고 있습니다. 회사에서는 유료 서비스를 구독하고 있어 Tailwind에서 제공되는 모든 컴포넌트를 빠르게 스크랩해 프로젝트에 바로 적용해 볼 수 있었습니다. 이를 통해 촉박한 개발 일정에서 스타일에 들어가는 시간을 상당 부분 단축하고 기능 위주로  빠르게 테스트를 해볼 수 있어 아주 유용했습니다. 

 

https://tailwindui.com/?ref=top

Tailwind UI - Official Tailwind CSS Components & Templates

 

6. Tailwind CSS extension tool을 통한 생산성 향상

VScode extension에 Tailwind css tool을 사용할 수 있습니다. 이를 통해 css 자동 완성 기능을 사용할 수 있습니다. 이 기능을 통해 간단하게는 색상 리스트를 미리 볼 수 있었고, 그외 모든 스타일의 종류를 리스트로 미리 볼 수 있어 모든 스타일을 다 외우지 않고도 필요한 스타일을 찾아서 빠르게 적용해 볼 수 있었습니다. 이를 통해 학습난이도 또한 한단계 낮아져 더 빠르게 다양한 스타일을 사용해 볼 수 있었습니다.

 

 

다음으로는 제가 느낀 Tailwind CSS 의 단점입니다.

 

1. 코드 가독성

우선 인라인 스타일로 스타일을 적용하는 만큼 CSS 코드가 길어질 수록 가독성이 떨어집니다. 기능은 단순한데 스타일이 복잡하다면 그만큼 코드의 양이 늘어나게 되고 전체 코드를 보았을 때 쓸데없이 복잡해보여 어떤 기능을 하는 코드인지 직관적이지 않습니다. 

아래의 코드는 실제로 프로젝트에서 사용하고 있는 코드의 일부분입니다. textarea와 button 두개로 이루어진 간단한 코드입니다. 아지만 아래의 이미지를 보면 다소 복잡해보입니다. CSS 코드가 길어지면서 전체 코드의 양이 늘어나 가독성을 해친 경우 입니다.  Tailwind CSS를 사용하면서 실제로 아래와 유사한 경험을 꽤 자주 겪게 됩니다.

 

이러한 문제점으로 인해 발생하는 또 하나의 문제점이 있습니다. 이전에 작성된 전임자의 코드를 수정하는 과정에서 동일한 스타일을 중복으로 작성하는 경우가 종종 발생했습니다. 인라인 스타일로 작성하다보니 mt와 같은 짧은 코드는 눈에 바로 띄지 않아 이미 작성해둔 코드가 있는 것을 찾지 못하고 중복으로 또 코드를 작성하곤 했습니다. 이러한 과정은 전체적인 코드의 길이를 증가시켜 더욱 가독성을 저하시킵니다. 다행스럽게도 Tailwind CSS는 우선수위가 있어서 중복으로 CSS가 작성되어 있을 경우 무조건 앞에 작성된 것을 기준으로 스타일을 적용하기에 스타일의 충돌은 피할 수 있었습니다. 

 

2. 동적 스타일링

Tailwind를 사용할 때 가장 쉽고 빠르게 동적 스타일을 적용하는 방법은 조건문을 사용하는 방식입니다. 다만 이 방식에서 꼭 지켜야 하는 규칙이 있습니다. 바로 "완전한 형식의 스타일로 작성할 것" 입니다. Tailwind CSS는 정규표현식을 통해 HTML 상에서 class일 수 있는 모든 단어들을 가져온 뒤 해당 단어가 Tailwind CSS에서 인식되면 그것을 CSS로 변환하는 방법으로 작동 하기 때문입니다.

 

아래의 글은 Tailwind CSS에서 제시하는 동적 스타일과 관련된 공식 문서입니다. 읽어보시면 알겠지만,  Tailwind CSS를 사용하면 필연적으로 발생하는 중복되는 코드를 처리하는 과정이 다소 여러 단계에 걸쳐 적용되도록 하고 있습니다.  비교적 효율적으로 관리하는 방법은 반복적으로 사용되는 스타일을 따로 관리하는 방식입니다. 실제로 프로젝트에서도 그러한 방식으로 반복되는 코드를 줄이려는 노력을 했습니다. 다만 개인적으로는 이러한 과정이 반복될수록 Tailwind CSS의 장점이 사라진다는 느낌을 받았습니다. HTML에서 바로 작성하고 관리할 수 있다는 것이 Tailwind의 가장 강력한 장점인데, 스타일을 다른 컴포넌트 혹은 파일로 관리하면 그 장점이 약화되기 때문입니다.

 

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Content Configuration - Tailwind CSS

 

 

결론 

인턴쉽과정에서 참여했던 프로젝트에서 처음 Tailwind CSS를 사용해보았습니다. 제가 참여한 프로젝트는 TF팀에서 진행하던 초기 단계의 프로젝트였고 기획이 채 마무리 되지 않은 상태에서 개발을 진행해야 했습니다. 그러한 상황에서 Tailwind는 변화의 가능성이 많은 기획과 피드백에 맞춰 빠르게 기능을 구현하고 테스트 과정을 진행해야하는 상황에 적합한 도구였습니다. 간단한 프로젝트를 개발하거나, 빠르게 기능을 구현해가며 빌드해야하는 프로젝트에는 Tailwind 만한 방식이 없다는 생각을 했습니다. 또한 디자이너가 없는 상황에서 프론트엔드 개발자가 모든 화면을 구상해야할 때도 일관성있고 심미적인 UI를 구현하기에 Tailwind CSS에서 제공하는 components들은 강력한 도구가 되어주었습니다. 카카오를 비롯한 여러 IT 기업에서도 Tailwind를 도입하는 것을 보면 확실히 신뢰도가 올라가는 것도 사실입니다. 물론 진행하려는 프로젝트의 조건에 따라 판단은 얼마든지 달라 질 수 있고 대세를 따르는 것이 무조건적으로 옳은 선택이라고 할 수는 없습니다. 하지만 저는 개인 프로젝트에서도 Tailwind CSS 사용하며 여러 단점이 존재함에도 불구하고 그 단점들을 상쇄 시킬만큼의 강력한 메리트가 있다는 생각을 했습니다. 

---

참고 문서

https://moon-ga.github.io/tailwind_css/2-dynamic-classnames/

[Tailwind CSS] Tailwind CSS의 작동 방식과 동적 스타일링 작성 방법 - (2)

Tailwind CSS - Rapidly build modern websites without ever leaving your HTM

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log

What is Tailwind CSS? A Beginner's Guide

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그

가장 쉽고 아름다운 CSS 프레임워크, Tailwind CSS

[Frontend] Tailwind CSS란?

Tailwind CSS from Zero to Hero - Up and Running

Tailwind CSS Tips and Tricks Worth Knowing

Why Tailwind CSS Won

(번역) Tailwind CSS의 장점과 단점

Tailwind CSS 사용법, 장점과 단점