Tailwind를 떠나며: CSS를 다시 배우기로 한 어느 개발자의 고백

왜 갑자기 Tailwind를 떠난다는 걸까요?

최근 Julia Evans라는 개발자가 자신의 블로그에 "Tailwind를 떠나며, CSS를 제대로 구조화하는 법을 배우는 중"이라는 글을 올렸어요. Julia Evans는 시스템 프로그래밍 만화책 (zine) 시리즈로 유명한 분이라 더 흥미로운데요. 이분은 한동안 Tailwind CSS를 잘 쓰고 있었거든요. 그런데 어느 순간부터 "내가 진짜 CSS를 쓰는 건지, Tailwind라는 도구 안에 갇혀 있는 건지" 헷갈리기 시작했다고 해요.

Tailwind가 뭐냐면, CSS 클래스를 미리 잘게 잘라놓고 HTML에 class="flex items-center p-4 bg-blue-500" 이렇게 줄줄이 붙여서 스타일을 적용하는 방식의 프레임워크예요. 클래스 이름을 새로 짓느라 머리 싸맬 필요가 없고, 어떤 스타일이 어디에 적용됐는지 HTML만 봐도 바로 알 수 있다는 게 강점이죠. 그래서 지난 몇 년간 프론트엔드 씬에서 거의 표준처럼 자리 잡았어요.

무엇이 문제였을까요?

Julia가 지적하는 핵심은 이거예요. Tailwind를 쓰다 보면 CSS를 "구조화"하는 감각을 잃게 된다는 거죠. 무슨 말이냐면, 원래 CSS는 "이 컴포넌트는 이런 모양이다"라는 의미 단위로 묶어서 작성하는 게 자연스러워요. 카드 컴포넌트면 .card, 그 안의 제목이면 .card__title 이런 식으로요. 그런데 Tailwind에서는 모든 게 HTML의 class 속성에 한 줄로 늘어서 있다 보니, 같은 디자인 패턴이 반복되어도 "아 이건 카드구나" 하는 추상화가 잘 안 보여요.

그리고 또 하나, 반응형이나 hover, focus 같은 상태 처리가 길어지면 HTML이 정말 읽기 힘들어진다는 점이에요. class="text-sm md:text-base lg:text-lg hover:text-blue-500 focus:ring-2 dark:text-white ..." 이런 게 한 요소에 20개씩 붙어 있으면, 나중에 그 컴포넌트가 어떤 모습인지 머릿속에서 그려내기가 어려워지거든요. Julia는 "CSS 파일을 따로 두고 한 줄씩 정돈해서 쓰니까, 오히려 내 의도가 더 선명하게 드러나더라"고 말해요.

그래서 Julia는 어떻게 바꿨나요?

Julia가 새로 선택한 방식은 의외로 단순해요. 그냥 CSS 파일을 만들고, 의미 있는 클래스 이름을 붙이고, 거기서 끝이에요. 다만 옛날처럼 무작정 쓰는 게 아니라, 요즘의 CSS 신기능들을 적극적으로 활용하는 거죠. 예를 들어 CSS 변수(custom properties), :has() 선택자, container queries, nesting 같은 것들이요. 이게 뭐냐면, 예전엔 Sass나 PostCSS 같은 전처리기를 써야 가능했던 일들이 이제 브라우저에서 그냥 돼요. CSS 자체가 많이 발전한 거예요.

특히 nesting은 Sass 안 써본 분들도 한 번쯤 봤을 텐데, .card { .title { ... } } 이렇게 중첩해서 쓰는 문법이에요. 이게 이제 표준 CSS에서도 지원되거든요. Julia는 "굳이 빌드 도구 없이도 모던 CSS만으로 충분히 우아하게 쓸 수 있다"는 걸 체감했다고 해요. 또 컴포넌트 단위로 파일을 쪼개는 대신, 페이지 단위나 기능 단위로 묶어서 관리하는 식으로 자기만의 구조를 만들어가는 중이라고 합니다.

업계는 어떤 흐름인가요?

사실 이런 "Tailwind 회의론"은 Julia가 처음이 아니에요. 작년부터 슬슬 "Tailwind 피로감"을 토로하는 글들이 늘어나고 있거든요. 반대편에는 Adam Wathan(Tailwind 창시자)이 이끄는 Tailwind v4가 있어요. v4는 빌드 속도를 대폭 끌어올리고, CSS 변수 기반으로 테마 시스템을 깔끔하게 다시 짰죠. 그리고 또 다른 흐름으로는 CSS Modules, vanilla-extract, Panda CSS 같은 "타입 안전한 CSS-in-JS" 진영도 있고요. 최근엔 shadcn/ui처럼 "Tailwind는 쓰되 컴포넌트는 내 코드베이스로 복사해서 쓰자"는 절충안도 인기가 많아요.

재밌는 건, 결국 다들 같은 문제를 풀려고 한다는 거예요. "스타일을 어떻게 의미 있게 구조화할까"라는 질문이요. Tailwind는 "유틸리티 클래스로 일관성을 강제하자"고 답했고, CSS Modules는 "스코프를 격리하자"고 답했고, Julia 같은 사람들은 "모던 CSS 자체가 이미 충분히 강력하다"고 답하는 거죠.

한국 개발자에게 주는 시사점

한국 프론트엔드 씬에서도 Tailwind 채택률이 정말 빠르게 올라갔어요. 토스, 당근, 카카오 같은 큰 회사들도 부분적으로든 전면적으로든 도입하는 추세고, 부트캠프 커리큘럼에도 거의 필수로 들어가 있죠. 그런데 Julia의 글이 던지는 메시지는 "Tailwind를 쓰지 마라"가 아니에요. "도구를 쓰기 전에 CSS 자체를 제대로 이해하고 있는가"를 묻는 거죠.

특히 주니어 개발자분들에게 권하고 싶은 건, 한 번쯤은 Tailwind 없이 모던 CSS만으로 작은 프로젝트를 만들어보는 거예요. CSS Grid, Flexbox, custom properties, :has(), container queries 같은 걸 직접 다뤄보면, Tailwind가 왜 그렇게 설계됐는지가 오히려 더 잘 보이거든요. 그리고 나중에 팀에서 "우리 디자인 시스템을 어떻게 만들까" 같은 논의에 참여할 때, 단순히 "Tailwind 쓰죠"가 아니라 "우리 상황엔 이런 게 맞을 것 같아요"라고 의견을 낼 수 있는 사람이 되거든요.

마무리

도구는 문제를 푸는 수단이지, 정답이 아니에요. Julia의 글은 "한 번 자리 잡은 도구라도 내 작업에 정말 맞는지 가끔은 의심해보자"는 신호 같아요. 여러분은 어떤가요? Tailwind를 쓰면서 "내가 CSS를 잊어가고 있다"는 느낌, 받아본 적 있으세요? 아니면 오히려 Tailwind 덕분에 CSS를 더 잘 이해하게 됐다고 느끼시나요?