Tailwind CSS
"Rapidly build modern websites without ever leaving your HTML."
— HTML 파일 창을 단 한 번도 떠나지 않고도 초고속으로 세련된 웹 화면을 찍어낼 수 있다는 공식 선언.
'클래스명 충돌 방지'와 '빠른 개발'을 위해 도입했으나, 결국 HTML 태그 하나가 화면의 절반을 가릴 정도로 괴랄한 인라인 스타일 뭉치가 되어버리는 기적의 디자인 도구. 처음엔 엄청 신세계라 환호했는데, 동료가 짠 태그의 'flex items-center justify-between p-4 bg-red-500 hover:bg-red-600 sm:p-6 lg:p-8 rounded-xl shadow-md transitions-all'을 읽고 있으면 눈동자가 탈탈 흔들린다...
1. 개요
Tailwind CSS는 기존의 부트스트랩(Bootstrap)처럼 미리 만들어진 컴포넌트를 가져다 붙이는 방식에서 탈피하여, 지극히 세부적인 CSS 속성들을 단축 클래스로 정의해 둔 유틸리티-퍼스트(Utility-First) 개념의 혁신적인 CSS 프레임워크이다. 별도의 스타일시트 파일(.css)을 열지 않고도 HTML 파일의 class="..." 속성 안에 쪼르륵 적는 것만으로 스타일링이 조립된다.
React나 Vue, Next.js 같은 컴포넌트 중심의 현대 프론트엔드 아키텍처와 시너지가 가히 완벽에 가까워, 2020년대 들어 모든 신규 웹 프로젝트의 마지노선 스타일 라이브러리로 무섭게 군림하고 있다. 디자인 시안이 없어도 직관적으로 픽셀 단위 조율을 할 수 있어 빠른 프로토타이핑에 환상적인 효율을 보여준다.(...)
2. 클래스명 쌓기 대작전과 빌드 크기 퍼징(Purging)의 승부
2.1. 클래스 더미의 홍수: HTML인가 암호문인가
Tailwind의 개발 생산성은 흉내 낼 수 없을 정도로 압도적이다. w-full h-screen flex justify-center items-center bg-gray-100만 치면 화면 중앙 정렬 레이아웃이 끝난다. 파일 간의 스위칭 스트레스가 없어 웹 퍼블리싱이 마법처럼 빨라진다.
핵심 단점은 HTML 구조가 극도로 지저분해진다는 점이다. 반응형 웹 디자인(Breakpoints)과 호버, 포커스 상태의 가상 선택자까지 인라인 클래스로 덕지덕지 구겨 넣는 순간, 태그보다 클래스명이 3배는 길어지는 진풍경이 펼쳐진다.1
이 때문에 '이럴 거면 1990년대 인라인 스타일 방식(style="...")이랑 대체 다른 게 무엇이냐'는 고전주의 디자이너들의 엄청난 맹공을 받았으나, 클래스 명칭의 엄격한 규격화와 디자인 토큰 일관성이라는 훌륭한 설득 논리로 승리를 쟁취했다.
2.2. 빌드 파일 다이어트: PurgeCSS의 마법
Tailwind는 기본적으로 수만 개에 달하는 미리 정의된 클래스 유틸리티를 담고 있기 때문에, 날것 그대로 배포하면 CSS 용량만 수 메가바이트(MB)에 육박하는 끔찍한 해프닝이 발생한다.
이 문제를 해결하기 위해 도입된 것이 바로 빌드 타임 트리 셰이킹(Tree Shaking) 및 Purge 기능이다. 빌드 도구(Vite나 Webpack 등)가 소스코드를 샅샅이 뒤져 개발자가 '실제로 한 번이라도 적은 클래스'만 쏙쏙 추려내고, 쓰이지 않은 수만 개의 클래스는 빌드 아티팩트에서 흔적도 없이 도려낸다.(...)
덕분에 최종 배포되는 실제 CSS 파일 크기는 10KB 미만으로 극적인 다이어트에 성공하며, 전 세계 브라우저 로딩 속도를 올리는 1등 공신이 되었다.2
3. 인라인 스타일과 암호문 코드
3.1. Tailwind CSS vs Vanilla CSS
클래스명이 너무 길어져서 코드 에디터 화면의 텍스트가 줄바꿈되어 화면 가득 수백 줄짜리 암호문으로 뒤덮인 화면을 캡처한 짤방이다. '우리는 클래스명 충돌을 피하기 위해 가독성을 쓰레기통에 버렸습니다'라는 개발자들의 눈물겨운 자조와 실소로 가득한 인기 프론트엔드 드립이다.
4. 여담
- 자비 없는 이름 짓기 규격: 클래스명은 픽셀(
px) 단위 대신 가상의 비율 단위(w-4,p-2등)를 강제하여, 개발자가 제멋대로 홀수 픽셀 마진을 주어 레이아웃 그리드를 파괴하는 행위를 미연에 완벽 방어한다. 개발 도중 커스텀 수치를 억지로 넣으려면h-[373px]처럼 괴이한 대괄호 문법을 사용해야 해서 개발자로 하여금 스스로 죄책감을 느끼게 만든다. - 테마 시스템의 위력:
tailwind.config.js설정 파일 하나에서 서비스의 메인 컬러, 반응형 브레이크포인트, 커스텀 폰트를 통합 제어할 수 있어, 다크 모드(Dark Mode) 지원 기능을 단 10분 만에 완벽하게 추가할 수 있는 미친 존재감을 자랑한다. - 공식 유료 컴포넌트 장사: Tailwind가 폭발적으로 인기를 끌자, 창립자인 아담 와단은 사전에 미리 이쁘게 짜인 UI 컴포넌트 묶음인 'Tailwind UI'를 아주 비싼 가격에 유료로 판매하기 시작했다. 무료 오픈소스로 생태계를 완벽히 장악한 뒤 고품질 템플릿으로 전 세계 개발자의 지갑을 터는 영리한 실리콘밸리 비즈니스의 교과서적인 우수 모델이다.