Tailwind CSS에서 Vanilla CSS로의 전환, 그 이유는?

저자는 8년간의 Tailwind CSS 사용 경험을 바탕으로, CSS 구조화의 어려움을 겪었다고 밝힌다. Tailwind CSS는 초기 CSS 코드 구조화에 도움을 주었지만, 점차 빌드 시스템 의존성 증가와 유연성 부족을 느끼게 되었다고 설명한다. 특히, Tailwind CSS와 Vanilla CSS를 혼용하는 과정에서 유지보수의 어려움을 겪으며 Vanilla CSS로의 전환을 결심하게 되었다고 언급한다.

저자는 컴포넌트 기반 CSS 구조화를 통해 코드의 가독성과 유지보수성을 높이는 방법을 제시한다. 각 컴포넌트는 고유한 클래스를 가지며, 다른 컴포넌트에 영향을 미치지 않도록 설계된다. 또한, 각 컴포넌트는 별도의 CSS 파일을 가지므로, 코드 변경의 영향 범위를 최소화할 수 있다. 이러한 구조는 CSS 코드 관리의 효율성을 높이고, 개발 생산성을 향상시키는 데 기여한다.

저자는 Tailwind CSS의 장점을 활용하여, reset, 색상, 폰트 크기 등에서 시스템을 구축한다. Tailwind CSS의 preflight styles를 복사하여 CSS reset을 구현하고, 색상 및 폰트 크기를 변수로 정의하여 일관성을 유지한다. 이러한 접근 방식은 Tailwind CSS의 편리함을 유지하면서, Vanilla CSS의 유연성을 확보하는 데 기여한다. 특히, 유틸리티 클래스(Utility Classes)를 활용하여 코드 중복을 줄이고, 유지보수성을 높인다.

저자는 CSS Grid를 활용하여, Tailwind CSS의 한계를 극복하고 더욱 유연한 반응형 디자인을 구현한다. Tailwind CSS의 md:text-xl과 같은 미디어 쿼리 기반의 반응형 디자인 대신, CSS Grid의 auto-fit 기능을 사용하여 화면 크기에 따라 자동으로 컬럼 수를 조절한다. 이러한 접근 방식은 코드의 간결성을 높이고, 다양한 화면 크기에 대응하는 유연한 레이아웃을 구현하는 데 기여한다.