TailwindCSS을 학습하기

SOSO·2024년 11월 25일

TailwindCSS 🌀

1. Utility-First의 새로운 세계

Tailwind CSS는 기존 방식과 달리 유틸리티 클래스를 중심으로 스타일링을 진행한다. 처음에는 "클래스 이름으로 디자인을 직접 다 쓰는 게 과연 효율적일까?"라는 의문이 들었다. 그러나 몇 가지 컴포넌트를 만들어보니 그 효율성이 피부로 느껴졌다. 특히, CSS 파일을 별도로 작성할 필요 없이 HTML 코드 내에서 빠르게 스타일링이 가능하다는 점이 정말 매력적이었다.

예를 들어, 아래와 같은 코드를 작성하며,

<div class="bg-blue-500 text-white p-4 rounded-md shadow-md">
  Tailwind CSS는 간단하면서도 강력하다!
</div>

CSS를 따로 분리하지 않아도 이 한 줄로 바로 시각적 피드백을 얻을 수 있었다. 스타일 수정이 필요할 때도 즉각적으로 클래스만 변경하면 되니, 개발 속도가 확연히 빨라졌다.

2. 디자인 시스템과 일관성

Tailwind CSS를 사용하며 가장 마음에 들었던 점 중 하나는 디자인의 일관성이다. 예를 들어, spacing, colors, font-size 등 모든 스타일링이 미리 정의된 시스템에 기반하기 때문에, 팀원 간의 스타일 충돌이나 비효율적인 커스터마이징을 줄일 수 있을 것 같았다.

이런 일관성 덕분에 협업 시에도 매우 유용할 것으로 보였다. 내가 속한 팀이 프로젝트에 Tailwind CSS를 도입하게 된다면, 누구나 동일한 클래스 체계를 사용해 빠르게 스타일링할 수 있을 것이다.

3. 단점은 없을까?

물론 처음 학습하는 입장에서 단점도 느껴졌다.

초기 학습 곡선: 유틸리티 클래스 이름을 외우는 데 시간이 조금 걸렸다. 특히, CSS 키워드와 다소 다른 Tailwind만의 네이밍 규칙이 적응하기 어려웠다.
HTML의 복잡성: 코드가 길어지는 경우, HTML 내에 유틸리티 클래스가 너무 많아져 가독성이 떨어지는 경우가 있었다. 이를 해결하기 위해선 컴포넌트화와 Tailwind의 @apply 기능을 적절히 활용해야 할 것 같았다.

4. Tailwind CSS가 주는 인사이트

Tailwind CSS는 단순한 유틸리티 클래스의 집합을 넘어, 프론트엔드 개발자에게 새로운 사고방식을 제공한다고 느꼈다. 코드 재사용성과 일관성을 유지하면서도 디자인 변경에 유연하게 대응할 수 있는 도구라는 점에서, 앞으로 더 자주 사용하고 싶다는 생각이 들었다.

지금까지 학습한 내용은 기초적인 수준이지만, 실제 프로젝트에 Tailwind CSS를 적용해보며 더 많은 가능성을 탐구하고 싶다. 새로운 기술을 배운다는 것은 언제나 흥미롭고, 이번 경험은 개발자로서의 성장을 다시 한번 자극하는 계기가 되었다.

5. prettier-plugin-tailwindcss 세팅

Prettier와의 통합

Tailwind CSS를 사용하다 보면 유틸리티 클래스들이 엉망으로 섞여 있는 경우가 많다.
예를 들어:

<div class="p-4 text-white bg-blue-500 shadow-md rounded-md">

위 코드처럼 클래스의 순서가 랜덤하게 섞여 있으면 코드 리뷰나 유지보수 시 상당히 번거로울 수 있다. prettier-plugin-tailwindcss를 적용하면, 클래스들이 Tailwind CSS의 권장 순서에 따라 자동으로 정렬된다. 설정 후 위 코드는 아래와 같이 변환된다:

<div class="rounded-md bg-blue-500 p-4 text-white shadow-md">

이처럼 논리적인 순서로 정렬되니, 코드를 보는 것만으로도 구조를 쉽게 이해할 수 있었다.

설치 및 설정 방법

설치는 매우 간단하다. 프로젝트에 Prettier가 이미 설정되어 있다면 아래 명령어를 실행해 플러그인을 설치한다:

npm install -D prettier prettier-plugin-tailwindcss

그다음, Prettier 설정 파일(.prettierrc 또는 .prettierrc.json)을 아래와 같이 업데이트한다:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

이후 저장할 때마다 Tailwind CSS 클래스가 자동 정렬되며, 추가적인 Prettier 옵션과도 문제없이 통합된다.

실사용 후기

prettier-plugin-tailwindcss는 학습 중인 개인 프로젝트에서 큰 도움이 되었다. 클래스 순서를 일일이 고민하지 않아도 되니, 스타일링 작업에 더 집중할 수 있었다. 특히 팀 프로젝트에서도 이런 플러그인을 활용하면, 코드 스타일을 자동으로 일관되게 유지할 수 있어 협업 효율성이 높아질 것으로 기대된다.

6. 결과물

tailwindCSS로 간단한 픽토그램을 만들어보았다

<section className="group flex h-[250px] w-full flex-row items-center justify-between bg-neutral-700">
        <div className="flex flex-row gap-4 group-hover:bg-yellow-400">
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
        </div>
        <div className="flex flex-row items-center justify-center gap-3">
          <div className="h-32 w-32 rounded-full border-2 border-black bg-red-500 transition hover:bg-red-300"></div>
          <div className="h-32 w-32 rounded-full border-2 border-black bg-yellow-500 transition hover:bg-yellow-300"></div>
          <div className="h-32 w-32 rounded-full border-2 border-black bg-green-500 transition hover:bg-green-300"></div>
        </div>
        <div className="flex flex-row gap-4 group-hover:bg-pink-400">
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
          <div className="h-[150px] w-4 bg-white"></div>
        </div>
        <div className="rounded-md bg-blue-500 p-4 text-white shadow-md"></div>
      </section>