고민에 빠졌다.
포트폴리오 사이트를 만들기 위해, CSS 프레임워크를 고민 하던 중, 어떤 것을 사용해야 할 지에 대한 깊은 고민에 빠졌다. 내가 주로 사용하던 프레임워크는 tailwindcss라서 마음같아서는 tailwindcss를 사용하고 싶지만, 다른 프레임워크도 써보고 싶다는 단순한 호기심에서부터 시작되었다. 나는 tailwindcss를 왜 써왔고, 다른 프레임워크보다 어떠한 장점이 있을까?
가장 큰 이유는 NextJS에서 권장하기 때문이다. SSR과 SEO 등 다양한 기능을 지원하는 React 프레임워크인 NextJS에서는 tailwindCSS 사용을 권장한다.
Next가 tailwindcss 사용을 권장하는 것을 엿볼 수 있는 것으로는 npx create-next-app을 치면, 세 번째 질문이 Tailwind CSS를 사용하시겠습니까? 라는 점이다. Yes를 누르면 Tailwind CSS를 친절하게 설치부터 기본적인 세팅까지 마쳐준다.
Tailwindcss는 다른 유명한 Styled-component, Emotion같은 CSS-in-JS가 아닌 Utility CSS방식이다. 컴포넌트 단위로 css를 작성하는 방식이 아니라, 미리 세팅된 Utility Class를 활용하여 HTML 코드내에 스타일링을 할 수 있는 방식이다. 즉, className에 기능들을 조합한 문자열로 스타일을 지정하는 방식이다.
tailwindcss의 문법은 BootStrap과 매우 유사하다. 대신, BootStrap과 다르게 Utility CSS이므로 필요에 따라 확장성 있게 CSS를 작성할 수 있다는 장점이 있다. 또한, BootStrap은 BootStrap문법에 맞게 적응을 해야하지만, tailwindCSS는 기존 css문법과 크게 벗어나지 않아 러닝커브가 비교적 낮은 편이다.
BootStrap
TailwindCSS
tailwindcss와 bootstrap의 지난 5년 그래프 출처 : npm trends
바닥부터 시작한 tailwindcss가 꾸준히 상승세를 타다가, 2023년을 기점으로 bootstrap을 따라잡은 것을 확인할 수 있다.
tailwindcss.config로 css속성을 커스텀하여 이용하여 일관성 있는 디자인 시스템을 적용할 수 있다.