🌊 Tailwind CSS를 ARABOZA

어 형이야

Tailwind (Atomic CSS)

Tailwind CSS는 2017년에 등장한 유틸리티 퍼스트(Utility-First) 프레임워크로, CSS 스타일을 미리 정의된 유틸리티 클래스로 분리하여, HTML에서 직접 적용할 수 있도록 합니다. 이를 통해 스타일 정의에 대한 복잡한 네이밍 규칙 없이 빠르고 효율적인 스타일링을 할 수 있으며, 다양한 유틸리티 클래스를 조합해 일관된 디자인 시스템을 구축할 수 있습니다. Tailwind는 특히 Atomic CSS 패러다임을 기반으로 하여, 소규모의 재사용 가능한 클래스를 통해 스타일을 적용하는 방식을 따릅니다.

Atomic CSS는 웹사이트의 시각적 요소를 작은 단위로 나누고, 각 단위에 이름을 부여해 스타일을 구성하는 방법입니다. 이는 디자인 요소를 재사용 가능한 CSS 클래스로 만들어, HTML 내에서 직접 적용하는 형태로 동작합니다. 예를 들어, Tailwind에서는 bg-blue-500, py-2, px-4 같은 클래스들이 미리 정의된 스타일 규칙을 가지고 있는데, 이러한 작은 스타일 단위들을 조합하여 다양한 디자인을 만들 수 있습니다.

<button class="bg-blue-500 text-white py-2 px-4 rounded">
  Click Me
</button>

Atomic CSS의 핵심 장점 - 성능과 재사용성

Tailwind의 Atomic CSS 방식의 가장 큰 장점은 성능 최적화입니다. 일반적인 CSS 프레임워크나 스타일링 방법에서는 작성된 스타일 코드 전체를 애플리케이션에 포함시키지만, Tailwind는 프로젝트에서 사용되지 않는 CSS를 제거할 수 있는 Purge 기능을 통해 최종 빌드된 CSS 파일의 크기를 줄일 수 있습니다. 이는 빌드 시점에 발생하며, JS의 Tree Shaking과 유사하게 이루어집니다. Purge 기능은 프로젝트에 실제로 사용된 클래스만 포함시켜 불필요한 스타일을 제거하는 방식으로 작동하며, 이를 통해 최종 CSS 파일이 매우 작게 유지됩니다.

/* Tailwind 빌드 결과 */
.p-8 {
  padding: 2rem;
}

.bg-blue-500 {
  background-color: #4299e1;
}

이렇게 미리 정의된 클래스들을 HTML에서 활용하면, 각각의 CSS 규칙을 재사용할 수 있으며, 브라우저로 전송되는 스타일 코드의 양도 줄어들게 됩니다. 이 덕분에 Tailwind로 작성된 프로젝트는 매우 가벼운 CSS 파일을 가질 수 있으며, 페이지 로딩 시간이 빨라집니다. 특히 대규모 프로젝트에서도 성능 저하 없이 CSS를 효율적으로 관리할 수 있으며, 작은 크기의 CSS 파일을 유지하는 것이 가능해집니다.

Just-In-Time 모드 (JIT)

Tailwind 3.0부터는 Just-In-Time 모드가 기본으로 활성화되어, 실시간으로 필요한 CSS 클래스만 생성하고 불필요한 코드는 빌드에 포함하지 않습니다. Purge를 통해 CSS 최적화를 진행하던 것이 JIT로 대체가 된 것인데요, Purge가 모든 스타일을 빌드에 포함시키고, 그 중 사용되지 않는 CSS를 제거하는 방식이라면 JIT는 애초에 빌드 중 필요한 CSS만을 실시간으로 생성합니다. 이로 인해 빠른 빌드 속도와 작은 CSS 파일 크기가 가능해지며, CSS 파일 크기가 10kB 이하로 유지될 수 있습니다. 특히, 재사용 가능한 유틸리티 클래스들은 HTML에 직접 적용되므로, 스타일 코드의 중복을 피하고 최적화된 형태로 제공할 수 있습니다. 이로 인해 JIT는 더 빠른 속도와 효율적인 파일 크기 관리를 제공합니다.

Tailwind의 단점 - 가독성 문제

Tailwind CSS의 유틸리티 클래스 방식은 빠르고 효율적인 스타일 적용을 가능하게 하지만, 동시에 HTML과 CSS의 강한 결합으로 인해 가독성이 떨어질 위험을 지닙니다. 클래스 속성에 여러 유틸리티 클래스를 나열해야 하므로, HTML이 복잡해지고 코드가 길어질 수 있기 때문입니다.

예를 들어, 다음과 같은 버튼 코드에서 다양한 스타일을 한꺼번에 적용할 수 있지만, 클래스 속성이 길어지고 관리가 어려워집니다.

<button class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300">
  Click Me
</button>

이와 같은 방식은 HTML과 CSS를 명확하게 분리하지 못해 유지보수성과 가독성이 떨어질 수 있습니다. 특히 대규모 프로젝트에서는, 많은 클래스를 중첩해서 사용해야 하므로, 각 요소가 어떤 스타일을 가지는지 빠르게 파악하기 어렵습니다. HTML 코드에서 변경할 스타일이 많다면, 모든 클래스명을 수정해야 하기 때문에 유지보수 비용이 높아질 수 있습니다.

---

그럼에도 불구하고

Tailwind는 웹 애플리케이션 개발에서 강력한 성능과 생산성을 제공합니다. 특히, 디자인 시스템을 구축하거나 일관된 스타일을 유지해야 하는 프로젝트에서 매우 유용합니다. 유틸리티 클래스들이 작고 재사용 가능하기 때문에, 여러 곳에서 같은 스타일을 쉽게 적용할 수 있으며, 불필요한 중복 작업을 줄일 수 있습니다. 또한, PurgeCSS와 JIT 모드를 통해 CSS 파일 크기를 최적화할 수 있어 성능 면에서도 탁월합니다.

CSS-in-JS와 같은 다른 스타일링 라이브러리와 비교했을 때에도, Tailwind는 런타임 성능에 미치는 영향이 적고 빌드 시점에 최적화된 CSS 파일을 제공한다는 장점을 가집니다. CSS-in-JS는 런타임에서 스타일을 동적으로 생성하지만, Tailwind는 미리 정의된 유틸리티 클래스를 사용해 불필요한 런타임 오버헤드 없이 빠르게 스타일을 적용할 수 있습니다. 또한, Tailwind는 스타일을 컴포넌트와 별도로 관리하기 때문에 CSS와 자바스크립트의 결합을 최소화하여 더 가벼운 번들을 유지할 수 있습니다.