Tailwindcss 적용해보기!

프로젝트를 진행하면서 프론트엔드 작업을 할 일이 많은데,

이전에 쓰던 vuetify를 걷어내고, tailwindcss를 적용해 보기로 하였다.

 

https://tailwindcss.com/docs/installation

Installation: Tailwind CLI - Tailwind CSS

 

Tailwindcss는 vuetify와 같은 라이브러리들이 컴포넌트를 만들어 놓고,  이 컴포넌트를 사용자 취향에 맞게 사용하는 것과 다르게

꼭 필요한 속성들을 class로 만들어놓고, 그 class들을 선택해서 사용하는 방식이다. 

따라서 특정 프레임워크에 종속적이지 않고, 자유도가 높다. 

다만, 컴포넌트들이 따로 정의되어 있지는 않기 때문에 직접 class를 이용해서 생성해야 하는 단점은 있다. 

이 단점마저도 유저들이 custom 컴포넌트를 많이 만들어 놓았기 때문에 이를 참고하면서 만들어나가면 충분히 해결 가능하다.

https://tailwindcomponents.com/

 

Vue 프레임워크에서 vuetify를 사용하면서 세부적인 속성을 컨트롤하기 힘들고, 세부적인 속성을 제어하다 보면 코드가 오히려 더 길어지는 느낌을 받은 적이 많았다.

새 디자인을 적용하는 작업을 진행하면서 vuetify 종속적인 컴포넌트를 없애고 새로 컴포넌트를 만들어 나가면서 점점 tailwindcss가 맘에 들었다. 

 

다만 대개 라이브러리들이 그렇듯 초기 설치가 어려웠다.

작성 시점 기준으로 vuetify는 vue3와 아직 모든 부분이 호환되지 않았기 때문에 vue2 + composition api의 조합으로 사용하고 있었는데, vue2가 사용하는 postcss가 이전 버전이라 홈페이지에서 안내하는 설치방법으로는 패키지 사이에 충돌이 일어나고 말았다. 그래서 postcss를 v7를 설치하는 방법으로 해결할 수 있었다. 

 

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

 

이후 작업은 웹페이지에 적혀있는 내용을 따라서 진행했다.

 

npx tailwindcss init

다만 이 방식으로 적용하다 보니 현재 최신 버전인 tailwind 3가 아닌, tailwind 2 버전으로 사용할 수 밖에 없다. 그래서 최신 버전에 적용되는 w-[330px]같은 유용한 기능을 사용하지 못한다. 사실 vue2 + composition api를 사용한 이유가 vuetify 때문이었으므로, 지원이 종료되어가는 vue2 대신 vue3로 올리고 tailwindcss도 최신 버전으로 사용하는 것도 고려해볼 만할 것 같다.