[CSS] Tailwind CSS - 01

Tailwind CSS

CSS를 작성하지 않고 클래스명을 제공하여 HTML에 필요한 CSS 유틸리티만 입혀도 스타일이 완성되는 특징을 가져 프론트엔드와 디자이너들에게 새로운 웹 개발 물결을 일으켰다.

Installation

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It’s fast, flexible, and reliable — with zero-runtime.

“Tailwind CSS는 모든 HTML 파일, JavaScript 구성 요소 및 클래스 이름에 대한 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 이를 정적 CSS 파일에 작성하는 방식으로 작동합니다. 런타임이 없고 빠르고 유연하며 안정적입니다.”

ㅁ npm을 통한 설치 및 tailwind.config.js 생성

$ npm install -D tailwindcss
$ npx tailwindcss init

ㅁ tailwind.config.js, globals.css 설정

// tailwind.config.js
/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/layouts/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/styles/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    screens: {
      sm: { max: "640px" },
      lg: { min: "640px" },
      fontFamily: {
        Roboto: ["Roboto"],
      },
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      "key-color": "var(--color-key-color)",
      highlight: "var(--color-highlight)",
      error: "var(--color-error)",
      "error-70-no-alpha": "var(--color-error-70-no-alpha)",
    },
    extend: {
      backgroundImage: {
        Percentage: "url(/assets/percentage.svg)",
      },
    },
  },
  plugins: [],
  darkMode: false,
};

/*src > app > globals.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-size: 10px;

  /*Colors*/
  --color-key-color: #1113e3;
  --color-highlight: #21ec01;
  --color-error: #c10015;
  --color-error-70-no-alpha: #f97c7c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

Using

<button className="border border-[red] text-[blue] w-[200px]">
  Tailwind CSS
</button>

Opinion

1. 극명한 장단점
   • next.js 를 사용해 프로젝트를 진행하면서 기본으로 적용되는 tailwind CSS를 사용해보았다. 장단점이 극명하게 나뉘다보 강력한 추천도 비판도 하기 힘든 것이 사실이다.
   • 비교적 짧은 시간에 완성해야 했던 프로젝트 특성상( 핑계;) ) 깊이있게 공부하고 적용하지 못한 것이 사실이지만 그에 앞서 지금껏 사용해오던 Styled-components와 비교가 됐던 것 또한 사실이다.
   • 사용하면서 보완할 점과 아쉬웠던 점들을 정리해보자
2. Utility-First
   • html과 css파일을 별도로 구분하여 관리하지 않아도 된다. 한 화면에서 html구조와 스타일링이 가능한 점이 개발속도에 가속을 붙여줄 수 있는 느낌
   • Tailwind CSS를 사용하지 않았다면 스타일링에 있어 필연적으로 className, Id 등 일부를 특정할 수 있는 네이밍이 필요했다.(ex - Wrapper, Container, etc…)
3. config.js의 잠재력
   • string에 대한 prettier/lint의 지원 부족으로 일일히 className을 통해 스타일링을 하다보면 휴먼에러를 야기할 수 있다.
   • 이를 위해 config.js를 세팅해두면 초반 세팅시간 대비 작업 후반부로 갈수록 작업속도가 향상되는 듯한 느낌이었다.

  <div className="flex sm:justify-between lg:justify-center bg-system-grey">
  ...
  </div>

1. 애매한 가독성..
   • VS Code를 사용하지 않는 나로써는 tailwind CSS에 대한 prettier가 아쉬웠다.(WebStrom 사용 중)
   • 동일한 스타일링에 대해 문법 및 순서까지 수정해주는 것으로 알고있는 VSC 플러그인에 비해 WebStorm은 아직 적용 가능한 플러그인이 없어 오타를 비롯한 휴먼에러에 대해 조심스러움이 많았다.
   • 동일 스펙에 대해 협업을 진행할 경우 git 충돌로 이어질 수 있는 귀찮음
2. 초반 러닝커브
   • 새로운 기술스텍을 사용한다면 불가피하지만 기존 사용하던 문법들이 너무 고착화되어있다.
   • Styled-Components와 같이 JS변수값에 따라 동적으로 스타일을 할당하 너무 번거롭다.
3. CVA - class-variance-authority
   • Styled-Components처럼 Tailwind CSS를 적절히(?) 사용하기 위해 적용한 라이브러리
   • 알고나면 비교적 사용하기 빠른 Tailwind의 가독성을 높여보자

  <button
    className={accordionButton({ active: accordion })}
    type={"button"}
    onClick={handleAccordionClick}
  >
  ...
  </button>

const accordionButton = cva(["lg:hidden"], {
  variants: {
    active: {
      true: ["rotate-180", "ease-in-out duration-300"],
      false: ["ease-in-out duration-300"],
    },
  },
  defaultVariants: {
    active: true,
  },
});