1. Tailwind CSS (CSS Framework로 분류)

유틸리티 클래스 라이브러리. 미리 CSS 정의된 선택자에 해당하는 클래스명을 조합해 개발

Tailwind in 100 Seconds

1.1. Tailwind CSS 장점과 단점

CSS Framework(Tailwind CSS, Bootstrap, Vuetify) 중 하나인 Tailwind CSS 의 장점은 2가지

• 장점 1 = 유틸리티 클래스 : CSS 단위 조각 = CSS 정의를 유틸리티 클래스 단위로 제공하여 → 이를 조합하여 원하는 스타일을 적용

• 장점 2 = Purge / Minify : CSS 번들링 최적화를 위해 가지치기

  Purge : 불필요한 CSS를 제거하는 과정, Tailwind에서는 content 옵션으로 실제 HTML이나 JS파일을 분석해 사용된 클래스만 남기는 방식으로 작동.

  module.exports = {
    content: ["./src/**/*.html"],
    theme: {
      extend: {},
    },
    plugins: [],
  };

  Minify : 코드를 압축하여 크리를 줄이는 과정, Tail

• 단점 = ClassName 이 너무 더러워진다. 사실상 인라인 스타일과 거의 유사하다는 비판

  • 다음을 통해 이제 더러워진 ClassName 도 아래와 같이 정리 가능하다.

    • ① 웹 프론트엔드 라이브러리/프론트엔드를 통해 Component 화
      프론트엔드 라이브러리(React, Vue 등)를 사용하면 재사용 가능한 컴포넌트로 추출하여 클래스명을 깔끔하게 정리할 수 있습니다.
      <button className="py-4 px-3 bg-blue-500 text-white font..." />

      • 해결 ⇒ <MyBlueButton />

    • ② @apply 를 통해 단일 클래스화
      Tailwind CSS는 @apply 디렉티브를 사용하여 여러 유틸리티 클래스를 단일 클래스로 합칠 수 있습니다.
      <button className="py-4 px-3 bg-blue-500 text-white font..." />

      • 해결 ⇒ <button className="**btn-blue**" />
        • .btn-blue { @apply py-4 px-3 bg-blue-500 text-white font…; }

1.2. Tailwind CSS 가 해결하는 기존 CSS 의 문제들

왜 사람들은 Tailwind CSS 에 열광하는가? = 기존 바닐라 CSS 의 아래의 단점을 보완해주기 때문

Tailwind CSS is the worst…

Colocation Bad → Colocation Good

1.2.1 Seperation of Concerns 케이스

• 문제 : HTML과 CSS 파일의 분리 (Separation of Concerns)
  기존의 CSS 접근 방식은 HTML과 CSS를 철저히 분리하는 것을 "좋은 설계"로 여겼습니다.
  하지만, HTML과 CSS가 분리되어 있으면 관리가 어렵고, HTML 코드에서 사용하는 CSS 클래스를 찾기 힘듬.
• 해결 : HTML과 스타일의 밀접한 연관성 (Colocation)
  Tailwind CSS는 유틸리티 클래스를 통해 HTML과 스타일을 한 곳에서 관리
  예 : <div class="text-center bg-blue-500 p-4">Hello</div>
  HTML 안에 스타일이 포함되므로 빠르게 수정 및 관리가 가능.

1.2.2. Verbosity → Minification

• 코드수를 많이 줄일 수 있다.

1.2.3. No Constraints → Design System 구축하기 수월 (세부 부분까지 커스터마이징 가능)

• Boostrap (Convention) = 이미 구축된 Design System (통일된 스타일 제공하지만 커스터마이징 불가)

  위와 아래 둘 사이에 존재하는 Tailwind CSS = Design System 구축하기 수월

• CSS (Configuration) = 처음부터 끝까지 모두 다 설정해야함 (과도한 커스터마이징)

1.2.4. Zombies → Purge

• Zombies : 사용하지 않은 CSS 클래스 정의들은 좀비처럼 남아서 Bundled.css 내 상주 Bundled.css 사이즈가 점점 불어나는 문제
• Purge : Tailwind CSS는 PurgeCSS를 통합하여 사용되지 않는 클래스를 자동으로 제거하고 최적화합니다.

1.3. 실무서 Tailwind CSS 사용 시 Tailwind-Merge + CVA + CLSX

• Tailwind-Merge - tailwind-merge는 유틸리티 클래스 충돌 상황에서 클래스 우선순위를 자동으로 조정
• CVA 씨바 : Class-Variance-Authority - CVA는 컴포넌트 상태별 클래스를 타입 세이프하게 관리할 수 있는 도구
• CLSX : Class Extension - clsx는 조건부 클래스 적용을 간단하게 만들어줌(클래스명 조합도구)