tailwindcss 초보 사용기

tailwindcss를 처음 접하고 몇몇 페이지에 적용해서 사용해 봤다. 사용해 본 결과 그 장점과 단점에 대해 간단하게 정리해 본다

tailwindcss는?

 

tailwindcss는 2017년에 처음 등장한 css 프레임워크로 마크업 태그에 인라인 속성으로 사용하는 것이 특징이다. 아래와 같이 태그의 class에 사용한다.

<template>
  <div class="w-80 h-80 p-20 flex flex-row rounded">
</template>

위 내용을 css로 작성한다면 아래과 같다. 

  width: 20rem;
  height: 20rem;
  padding: 10rem;
  display: flex;
  flex-direction: row;
  border-radius: 4px;

보다시피 tailwindcss는 획기적으로 css 코드를 압축/단축한다.

장점

그 외에도 여러 장점이 있다.

 

 

명시도에 구애받지 않는다

 

CSS에서 명시도란 선택자를 말한다. 아래와 같이 class를 선택해서 스타일을 적용한다.

<div class="mainBox">안녕하세요</div>

<style>
  .mainBox {
    font-size: 20px;
    color: black;
  }
</style>

 

CSS 선택자는 캐스케이딩, 즉 우선순위가 정해진다. 선언 순서, 선택자, CSS 선언 위치 등에 따라 바뀌게 되는데 !important 기능을 사용해 강제로 우선순위를 끌어올리는 방법도 있다. 이 우선순위 때문에 스타일이 꼬이는 경우가 더러 있다. class 네임이 중복되었거나 했을 때 말이다. tailwindcss는 class에 직접 스타일을 적용하기 대문에 이런 고민을 덜 수 있다.

 

 

반응형이 덤으로 따라온다

 

tailwindcss의 큰 장점인 것 같다. docs에서 제공하는 가이드만 잘 따른다면 얼추 반응형으로 작동한다. docs에도 나와있지만 rem 단위로 적용되기 때문인 것 같다. rem은 브라우저의 font size에 따라 px이 정해지는데, 브라우저의 기본 폰트 사이즈가 16px이라면 2rem은 32px로 적용되는 것이다. 

tailwindcss docs

처음엔 아무 생각 없이 작업하다가 브라우저 창을 줄였더니 각 요소들이 살아 있듯이 알아서 줄어들고 늘어났다. 그러니까 tailwindcss는 반응형을 심도 있게 고려하지 않아도 된다.

단점

물론 사용하다 보니 나타난 단점도 있었다.

 

 

docs를 켜두고 찾아봐야 한다

 

tailwindcss의 docs를 키고 사전처럼 사용해야 한다. 즉, 윈도우를 하나 더 키고 vsCode와 윈도우를 탭탭 해야 한다는 것. 어느 정도 쓰다보면 외워질 줄 알았는데 잘 익숙해지지 않는다. vsCode 익스텐션으로 tailwindcss 자동완성 기능도 켰는데 문제가 있다. 예를 들어 background-color를 찾는다고 해보자. ba 까지 쳐도 자동완성에 나오지 않는다. 그렇다고 b를 치면 너무 많은 자동완성이 추천된다. 정답은 bg-black이다. 또 align-items를 찾아보려고 align를 쳐봤지만 tailwindcss에서는 items-start로 사용하기 때문에 items로도 검색을 해봐야 한다. 자동완성에 기대지 못하고 결국 docs에 검색을 해보게 된다. 생각보다 귀찮은 과정이다.

 

구현할 수 없을 때 결국 css를 찾게 된다

 

제공하는 css 기능이 없다면 결국 style 시트 안에 css를 구현해야 한다. tailwindcss에 아직 구현되지 않은 css 기능이 있기 때문에 아주 간혹이지만 직접 구현해야 한다. 프레임워크의 단점이기도 하다. 편리하지만 제한적인 그런.

 

 

좀 지저분 해진다

 

각 태그의 class 마다 스타일을 적용하다 보니 코드가 더러워졌다. 이건 내가 아직 바보처럼 사용하고 있어서 그럴지도..? 반복되는 스타일은 컴포넌트로 빼서 사용할 수 있는 방법이 있지 않을까 싶다. 

 

 

아직은 vue에만 적용해서 써보고 있다. 리액트에서 emotion이랑 결합해서 스타일 컴포넌트로도 만들 수 있을 것 같기도 하고..? 어쨌든 반응형이나 간편성 등을 따져 종합적으로는 만족하면서 사용 중이다.