React를 이용해 개발할 때는 styled-components를 자주 활용했다.
React의 특징 중 하나인 ‘컴포넌트’를 생각해보면 styled-components는 CSS 요소를 가진 컴포넌트를 생성해 여기저기에 가져다 사용할 수 있다는 점에서 ‘컴포넌트’의 특징인 재활용성을 잘 활용할 수 있는 좋은 친구라고 생각했다. 물론, 그건 지금도 변함이 없다.
다만, styled-components는 CSS의 성향을 띤 JavaScript 라이브러리이고, 재활용성이 좋기는 하지만 특정 요소를 고려할 때마다 값을 바꿔주는 기능을 추가해야 하거나, 복제본을 떠서 새로운 컴포넌트를 만드는 번거로움을 고려해야 하니 이를 대체할 수 있는 다른 방법이 뭐가 있을지 알고 싶어졌다.
그 때, 머릿 속에 스쳐지나간 CSS 프레임워크. Tailwind CSS가 있었다. 요즘 여기저기 입에서 오르내리는 이 친구, 대체 왜 쓰는지 호기심이 생기기 시작했다.
그래서 한 번 배워보고자 한다.
Tailwind CSS의 특징이나 장점은 무엇인지, 그리고 styled-components와 비교할 때 써먹을 수 있는지, 또 React에서 사용하기에 괜찮을지를 학습 과정을 통해서 알아가보겠다.
🔧 React에서 Tailwind CSS를 사용하기 위한 환경 설정
✅ 이제 React에서 Tailwind CSS를 사용할 수 있는지 확인해보자.
Tailwind CSS의 홈페이지에선 자신을 이렇게 소개하고 있다. ‘당신의 HTML을 떠날 필요 없이 모던 웹사이트를 빠르게 구축해보세요.’라고.
Tailwind CSS 프레임워크는 ‘Utility-first(유틸리티 우선)’를 지향한다. utility라는 단어는 ‘유용성, 다양성, 소프트웨어’ 등의 의미를 가지고 있는데, 여기서 tailwind CSS가 지향하는 utility-first라는 건 ‘HTML 내에서 직접 표시하되, 미리 만들어 둔 CSS Class를 활용해 사용하는 것’을 뜻한다.
Tailwind CSS의 Class에는 각 CSS의 스타일링 정보가 적용되어있다. 이용자는 이 Class를 적절하게 배치함으로서 HTML 태그를 원하는 대로 꾸밀 수가 있다. 이것이 Tailwind CSS의 ‘Utility-first’가 되겠다.