Tailwind CSS 사용기

이 글에선 tailwind CSS의 초기 세팅 및 사용법에 대해서 설명하지 않는다. 해당 내용은 공식문서에 가장 잘 설명이 되어있다. tailwind CSS를 사용하며 느낀점과 문제점, 그리고 해결과정에 대해서 설명한다.

실제 적용 화면

Tailwind CSS란?

Tailwind CSS는 Utility-First CSS 프레임워크이다

Utility-First CSS?

미리 프로젝트에 맞게 세팅되어있는 유틸리티 클래스를 활용하여 html 코드내에서 스타일링 할 수 있게하는 css

사용계기

기존에는 프레임워크 없이 SCSS를 사용하고 있었는데 최근 다수의 기업들이 CSS 프레임워크를 사용한다는것을 알게되면서 사용시 이점이 무엇인지 궁금하여 사용해보게 되었다

CSS framework에는 emotion, bulma등등 다양한 프레임워크가 있었지만 가장 관심있는 기업에서 사용하는 tailwindCSS를 우선적으로 사용해 보았다. (향후 emotion도 사용해볼 예정!)

1) 사용기

깨끗해진 파일구조

기존에는 SCSS 파일을 거의 tsx파일의 1:1 대응으로 생성해주었었다

tailwind css는 utility first css 이기 때문에 html 코드안에 삽입 되므로 따로 style 파일을 생성할 필요가 없어졌다. 따라서 좀 더 깔끔한 파일구조를 갖게 되었다

또한, 예전 동료 개발자와 나눴던 얘기중 css 파일을 확인해야해서 화면을 분할로 놓고 작업한다는 이야기가 있었는데 css파일이 분리되어있지 않다보니 한 화면에서 개발할 수 있는점이 좋았다

---

클래스명의 중복 및 작명 고민 해결

SCSS를 사용할 떈 항상 CSS module을 사용해 고유값을 만들어 클래스명 중복시에 발생할 수 있는 문제를 해결해주었다. 또, BEM 기반 코드 컨벤션을 만들어 중복을 피하고자 했는데 해당 과정에서 클래스명을 고민하는데 적지않은 시간이 할애 됐던것 같다

import styles from "./CircleProfile.module.scss";
import cb from "classnames/bind";

const cn = cb.bind(styles);
.
.
.
  return (
    <div className={cn(`container`, shadow, className)}>
      <div className={cn(`wrapper`)}>
        <img className={cn(`profileImg`)} src={img} alt="circle profile" />
      </div>
    </div>

tailwindCSS는 class명이 필요하지 않기 때문에 고민의 시간이 없어졌다

<div className="flex flex-col items-center h-full">

---

쓸만한 inteli sense

tailwind CSS를 이용할때의 장벽중 하나는 유틸리티 클래스를 어느정도 외우고 있어야 한다는것인데 이러한 부분을 해소해주는 inteli sense가 지원된다

---

일관된 스타일 제공

컬러 및 fontsize 등 모든 요소가 클래스내에서 동일한 값으로 정의 되어있다 같은 클래스를 사용하면 일관적인 스타일을 주는것이 가능하다

 

그렇다고해서 규정이 아예 제한적인것은 아니다

2) 개발 중 겪은 문제점 및 시도한 방법

떨어지는 코드의 가독성

개인적으로 tsx 파일 내부에 장황하게 코드가 있는것을 선호하지 않는다.. 또한 이 태그가 담당하는것이 어떤부분인지 한눈에 파악하기 어렵고, 복잡하여 유지보수에서 어려움이 있었다

<div className="h-20 flex flex-col justify-center item-">
  <p className="text-2xl font-semibold text-gray-600">Blue Night</p>
  <p className="font-semibold text-gray-300">Troye sivan</p>
</div>

시도한 방법

styled component를 도입하여 tailwind CSS + styled component 조합으로 사용해보았다.

이전 프로젝트에서 styled component를 사용하였을때 가장 큰 장점으로 해당 태그가 어떤 역할을 하는지가 한눈에 명시되어 가독성이 좋았던것에서 착안하였다

const Container = tw.div`
  relative
  h-1/6
`;
const NavBarArea = tw.div`
  flex justify-around
  text-white
  font-semibold
  items-center
  h-full
`;
const Holder = tw.div`
  rounded-full
  w-10 h-2 
  border
  bg-white 
  absolute 
  bottom-3 left-[calc(50%-20px)]
`;

...

    <Container>
      <NavBarArea>
        <MdArrowBackIosNew
          color="white"
          size={20}
          onClick={() => navigate(-1)}
        />
        <p>Now Playing</p>
        <FiHeart color="white" size={20} />
      </NavBarArea>
      <Holder />
    </Container>
  );

확실히 이전보다 코드가 깔끔해져 가독성이 좋아졌다

그러나 발생한 추가 문제??

확실히 해결하고자 했던 문제(떨어지는 가독성 및 유지보수)는 해결했지만 다른 꼬리문제가 발생하였다

styled component, tailwind CSS를 각각 사용시엔 intelisense가 잘 작동 하였는데 둘을 한번에 사용하려니 intelisense가 작동하지 않았다

tailwind css에 정의 되어있는 class들을 외우지 못한 상태였기 때문에 이러한 문제는 개발 속도를 현저히 늦추게 되었다…

intelisense내부에 옵션이 있는지, 둘을 함께 지원하는 intelisense plugin이 있는지 찾아보았지만 찾지 못하였다

또한, 해당 조합을 사용하는 기업이 있는지 찾아 오픈 github를 살펴보았으나 당연히도 코드를 참고할 수 없었다

(관련 문제 해결방안이나 plugin을 알고 계신 분들은 댓글로 알려주신다면 정말 감사하겠습니다!)

이 문제를 해결하기 위해 apply를 사용해보는건?

tailwind에는 사실 재사용성을 위해 apply라는 기능이 있다

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
...
<button class="btn-primary"></button>

이렇게 하면 가독성안좋은 코드와 재사용성 문제를 한번에 해결 할 수 있다!

하지만 개인적으로 이게 기존의 css를 사용하는것과 다를바 없다고 생각하여 쓰지 않았다(하지만 반복되는 style이 많았다면 byte 낭비를 피하기 위해 사용하였을것이다)

3) 느낀점

Tailwind CSS를 사용하면서 가장 크게 느낀것은 디자인 시스템에 적합한것 같다라는 생각이었다

프로젝트 중 스타일의 일관성은 매우 중요하다 사용자가 서비스를 이용할때 페이지별로 ui의 느낌과 형태가 다르다면 ux가 매우 좋지 않을 것이다 때문에 거의 대부분의 기업이 디자인 시스템에 대해 중요하게 생각하는것 같다

스타일의 일관성을 혼자하는 경우에도 신경써야할 부분이지만 프로젝트 규모가 커질수록, 협업인원이 많아질수록 더욱 관리하기 어려워진다고 생각한다 이러한 문제를 해소하기에 utility-first-css인 tailwind CSS는 아주 적합한 css framework라고 생각한다 (실제로 상용서비스에 도입한 이유는 다를 수 있다)

정확한 style을 빠르게 개발 할 수 있다는점이 마음에 드는 framework였다