Tailwind가 대세가 된 이유에 관한 고찰

 

intro

 

오늘은 styled-components 수업을 듣던 중, 왜 tailwind가 아닌 해당 라이브러리를 사용하고 배우며 그것에 관해 고찰한 내용을 글로 써보았다. 하나의 주제를 잡고 파고들어 고찰을 하는 글을 써보는 것은 처음이지만, 구글링과 공부하면서 배운 내용을 정리해보도록 하겠다.

 

---

 

 

1. Styled-components의 '유지보수 모드' 진입: 왜?

 

우선 해당 라이브러리는 javascript 안에서 css를 작성할 수 있게 했던 대표적인 Css-In-JS라이브러리였다. 컴포넌트 단위로 스타일을 정의할 수도 있고, props기반으로 동적 스타일링도 가능했기 때문에, React프로젝트에서 많이 사용되었다.

React스타일링의 표준이라고 하면 아직 나에게는 Styled-components이다. 실제로 1-2년 전 리액트 프로젝트 2가지의 디자인을 모두 해당 라이브러리를 쓴 경험이 있다. 

 

하지만 이 라이브러리가 더이상 적극적인 개발을 진행하지 않으며, 기존 기능의 유지보수만 이루어진다는 '유지보수 모드'에 진입한다고 공식 발표를 했다. 이유를 찾아보니 다음과 같았다.

 

 

1. 리액트의 방향성 변화

React Core팀은 Context API의 사용을 지양하는 방향을 택하고 있다. 특히 Server Component에서는 Context API를 사용할 수 없고, 그에 대한 별도의 마이그레이션 경로도 제시하지 않았다고 한다. 여기서 문제점이 발생하는데, styled-components는 내부적으로 Context를 사용하는 구조이기 때문에, Server Components환경에서 자연스럽게 호환이 어려워졌다. 

 

 

2. CSS-in-JS의 하락세, Tailwind CSS의 부상

한때 대세였던 CSS-in-JS방식은 점점 사람들에게 쓰이지 않기 시작했다. Tailwind CSS와 같은 유틸리티 퍼스트 방식*의 스타일링이 디자인 시스템에서 표준으로 잡기 용이하고 성능, 디버깅 편의성 등의 이유로 자연스럽게 Tailwind CSS를 사용하고 있다.

여기서 유틸리티 퍼스트 방식이란 클래스를 조합에서 스타일을 만드는 도구이다.

 

 

 

 

 

실제로 tailwindcss의 다운로드 량이 급부상하고 있다. 

 

---

2. 갑자기 tailwind가 대세가 된 이유?

위의 글 맥락과 비슷한 2번 주제이다. 어쩌면 대세라는 단어도 맞지만 이제는 '표준'이 될 정도로 리액트에 걸맞는 스타일링 도구라고 생각한다. 특히나 최근 Tailwind CSS v4의 등장은 프론트엔드 스타일링의 판도를 완전히 바꿨다고 한다. 

 

1. 엔진의 혁신

v4는 Rust언어로 작성된 새로운 엔진을 도입했다. 빌드 속도가 이전 버전보다 10배 이상이나 빨라졌다고 하며, 이로 인해 개발자 경험 (DX)의 느낌이 전과 다르다고 한다.

 

2. Zero-Runtime & Zero-Config

런타임 비용이 없다. 모든 스타일이 빌드 타임에 정적 CSS파일로 생성되기 때문이다. 

이제 복잡한 tailwind.config.js가 필요가 없어졌다. css파일 내에서 직접 변수를 선언하고 테마를 확장하는 방식으로 바뀌어서 설정이 매우 편리해졌다.

 

---

글을 마치며

 

만약 새로운 리액트 프로젝트를 시작해야 한다면 주저하지 말고 지금 가장 성능적으로도, 편의성도 뛰어난 Tailwind CSS v4를 사용해보는것이 좋을 것 같다. 물론 기존 프로젝트가 styled-components를 사용하면 그것을 어쩔수 없이 써야겠지만, 만약 그 프로젝트가 해당 라이브러리로 인하여 성능이슈를 낸다면 Tailwind로 갈아타는 것을 깊게 고려해봐야 할 지도 모른다.

 

다음시간에는 '그래서 그렇게 좋은 Tailwind. 어떻게 사용하는 걸까?' 에 대한 포스팅을 진행하도록 하겠다.