TailwindCSS 설치과정 및 장단점

서론

작년 State of CSS 2021 에서 tailwind 라는 프레임워크를 알게되었다.

그때는 사실 bootstrap같은 프레임워크에 불과하겠지라는 생각했지만 막상 들여다보니 많이 달랐다 특히 내가 공부할려던 vite, nextjs에서는 공식적으로 지원하기 시작하였고, 막상 본인도 궁금해져서 맛볼겸 프로젝트에 적용할겸 공부차원에서 넣을려고 한다.

Tailwind CSS가 무엇인가?

• Utility-First를 지향하는 CSS 프레임워크이다.

  • Utility-First 란? 미리 세팅된 Utility 클래스를 사용해서 만드는 것을 말한다.

• 기존에 클래스명을 고민하느라 고생했지만 tailwind에서는 관련된 클래스만 쓰면 바로 사용이 가능하다

    <button class="py-2 px-4 rounded-lg text-white bg-blue-500">
      Click me
    </button>

설치과정

https://tailwindcss.com/docs/installation

tailwindCSS 설치과정은 매우 단순했다 일단 CRA(Create-React-App)기준으로 설명하겠다

공식문서 기준으로 설명하겠다

문서에서는 다양한 프레임워크 기준으로 설명이 되있으니 참고 바란다

1. tailwind CSS 설치

   • tailwindCSS 설치

       npm install -D tailwindcss

   • tailwindCSS init (tailwind.config.js 파일생성)

       npx tailwindcss init

1. 파일내 템플릿 경로 구성

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

2. index CSS 파일에 tailwind 지시어 추가

    /* 최상단에 추가  */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

3. 프로젝트 run

    npm run start

4. 테스트

   

       <h1 className="text-3xl font-bold underline">
         Hello world!
       </h1>

   매우 잘되는걸 확인할수 있었다

장단점

물론 CSS도 SASS, CSS in js 등처럼 변해왔기때문에 완벽하다곤 할수없다고 생각한다.

(이것도 사람이 만든건데… 완벽할수없겠지)

장점

1. Utility-First로인한 편리한 개발

   앞에서 설치과정을 쉽듯이 적용하는 과정이 매우 편리하다 바로 style적용하면 적용되니 얼마나 간편한가… 그리고 무엇보다 클래스 네임을 고민하지 않아도 되는게 가장큰 메리트라고 생각된다.

    https://tech.kakao.com/2022/05/20/on-demand-atomic-css-library/
   
    위 글에서 CSS에 대한 고민 방법론의 방향성이 많이 적혀있었다.

2. 편리한 디자인 시스템

   사실 이부분은 styled-component에도 theme이라는 커스텀이 존재하지만 useTheme으로 매번 처리해줘야되는 부분이 매번 힘들게 만들었던것같다. 그러다보니 공통 디자인 시스템을 벗어나 매번 컴포넌트내에서 선언하다보니 공통된 디자인의 재사용성이 약해졌다.

    const Item = () => {
        const theme = useTheme();
        return (
            <div style={{ color: theme.palette.primary.main }}>test</div>
        )
    }

   하지만 tailwind는 달랐다 기본적인 theme을 제공할뿐아니라

   사용자 지정에 맞게 확장이 가능하다고 공식문서에 써있었다. 쉽게 확장에 쉽다고 이야기하고있었다. 간단한 config정의만으로 클래스내에서 사용이 가능하다니…. 대단하구먼

    // tailwind.config.js
    colors: {
          'blue': '#1fb6ff',
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },

3. 다양한 기능 제공

   위에서 말한 커스텀부터 시작해 vscode내에서 자체적으로 Intelli Sense 플러그인을 공식적으로 지원해준다. 쉽게 말해 초보자도 쉽게 쓸수있다는 것

   Tailwind CSS IntelliSense

단점

물론 도구이다보니 모든게 좋은건 아니였다.

1. 코드가 너무 장황해진다.

    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div class="shrink-0">
        <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
      </div>
      <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-slate-500">You have a new message!</p>
      </div>
    </div>
   
    <!-- 출처 : https://tailwindcss.com/docs/utility-first -->

   위 코드는 공식문서에서 나온 chat notification을 만드는 것인데 사실 이미 최상단 컨테이너 부터 너무 길지 않나 생각이 든다… 아무리 기능이 좋고 하지만 코드가 길어지면 보기 싫고 찾기 힘들어진건 매한가지 (가독성이 매우 떨어짐)

2. 쉽긴하지만 러닝 커브가 있는편

    // inline-style
    <div style={{ display: 'flex', justiftContent: 'center', alignItems: 'center' }}>test</div>
   
    // tailwindCSS
    <div class="flex items-center justify-center"></div>
   

   같은 코드이다 사실 이번건 쉬운편이지만 다른 것들을 하다보면 어?… 왜?… 라는 느낌을 자주 받았었다 그만큼 초반 러닝커브나 cheatSheet를 확인하는 습관이 생기는건 사실이다

3. 자바스크립트 코드 사용이 어렵다

   동적 스타일링이 어렵다. 사용은 가능한데 매우 번거롭다, stlyed-component처럼 props로 바로접근할수있게 만드는 twin.macro 공식 라이브러리가 아니라 일부 지원이 느리거나 안될때가 있었다 (특히 … emotion 후 너무 고생했다)

마무리

장단점을 쓰면서 느낀거지만 사실 완벽에 가까운건 없다구 생각한다. 그만큼 고쳐나가면서 더욱 편리하게 제작하는것이니까

사실이 tailwind 자체도 해외에서도 논란거리라고 한다(누가 reddit에 tailwind 왜 쓰는거임 같은 글을 쓴다면 거의 전쟁터…)

아래글도 나쁘지않은글이라 첨부해본다.

https://www.builder.io/blog/the-tailwind-css-drama-your-users-don't-care-about

개인적으로는 나쁘지않은 경험이였다 특히 twin.macro를 쓰면서 두가지를 모두 쓰면서 느낀점은 굳이?… 라는 느낌을 강하게 받았고, 각각의 장점을 살리는건 좋지만 그만큼 메리트가 떨어진다고 생각이 들었다. 현재 프로젝트는 tailwind에 익숙하지않아 styled-component와 함께 사용하는 twin.macro를 쓰고있지만 추후에는 tailwind로 빠르게 초기 세팅마치고 들어가지 않을까 한다.