[사이드 프로젝트] TailwindCSS

제혁·2023년 1월 3일

진행한 내용

styled components -> tailwindCSS

TailwindCSS로의 전환

원래는 피드에 관한 퍼블리싱 작업을 끝낸 후 블로그를 작성하려 했으나 그 전에 Styled-Components를 TailwindCSS로 전환해보자 하고 작업을 진행하였다. 난 Styled-Components를 정말 오래 사용했다. 어디서 따로 공부를 하고 사용했던 건 아니기 때문에 내가 잘 못 쓰고 있는건지는 잘 몰라도 참 많이 불편하단 생각이 들었다.

Styled-Components를 처음 접했을 때만 해도 그 당시의 나에겐 혁명이었다. css에 js를 적용할 수 있었으며 복잡한 class와 id가 덕지덕지 붙은 태그들을 한 번에 해결해 주니 이보다 좋을 수가 없었다. 하지만 계속 쓰다 보니 문제들이 하나씩 발견되기 시작했다. 첫 번째는 이름이다. 내가 못쓰는 것 같긴 한데 난 Styled-Components를 말 그대로 컴포넌트처럼 활용해 왔다. 그리고 그럴 때마다 이름을 붙여줬어야 했는데 이건 솔직히 class 명 붙이는거랑 별 다를바가 없었다. 너무 많은 이름들을 지어야 했고, 이는 곧 스트레스가 되었다. 두 번째는 파일 구조의 복잡함이다. 난 Styled-Components 내용들을 따로 파일을 만들어 분리해 두었는데 예를 들면 Home이란 폴더에 index.tsx, style.ts 이런 느낌으로 파일을 2개 만들어 작성해 왔다. 이렇게 계속 하다보니 파일 양이 늘었고 이는 나에게 좋지 않은 경험을 선사해 주었다.

그렇게 2년 정도 styled-components를 사용하다 최근에 nomadcoder의 carrot-market 강의에서 TailwindCSS란 것을 처음 접하게 되었다. 이름을 지을 필요도 없고 파일을 따로 만들 필요도 없다. 커스텀이 가능하며 Styled-Components처럼 js와도 같이 사용할 수가 있는 것을 보고 여러 자료들을 찾아보며 진짜 Styled-Components를 대체할 수 있을지 고민했다.

원래 이 프로젝트에 TailwindCSS를 적용할 생각은 없었으나 이름을 짓다가 짜증이 나 홧김에 TailwindCSS 환경설정을 하고 작업에 돌입했다. 그리고 현재까지 작업했던 모든 Styled-Components를 TailwindCSS로 바꾸는데 성공했다.

TailwindCSS로 바꾸면서 느낀건 컴포넌트, 함수화 해야될 중복 내용이 너무나 많다는 것이다. 이는 아직 작업 중인데 정말 진짜 너무 많다. 이렇게 중복된 내용들을 쓸 시간에 미리 컴포넌트나 함수로 만들어 놓고 작업했으면 시간이 얼마나 단축됐을지 모르겠다.