Managing duplication and creating reusable abstractions.

• Tailwind는 오직 low-level utility class만 사용하여 디자인을 구현하는 utility-first workflow를 장려한다.

• 하지만 이러한 방식은 프로젝트 규모가 커짐에 따라, 공통되는 utility 조합combination들을 반복하고, 같은 디자인을 여러 곳에서 다시 만들어야 하는 문제점이 있다. 예를들어 아래 디자인을 구현한 코드를 살펴보자.

  

  <div>
    <div class="flex items-center space-x-2 text-base">
      <h4 class="font-semibold text-slate-900">Contributors</h4>
      <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
    </div>
    <div class="mt-3 flex -space-x-2 overflow-hidden">
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="<https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80>" alt=""/>
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="<https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80>" alt=""/>
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="<https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80>" alt=""/>
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="<https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80>" alt=""/>
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="<https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80>" alt=""/>
    </div>
    <div class="mt-3 text-sm font-medium">
      <a href="#" class="text-blue-500">+ 198 others</a>
    </div>
  </div>
  

  • 이런식으로 같은 이미지 UI가 반복됨에 따라 동일한 조합의 utility class도 반복되는 것을 알 수 있다.

• 이 가이드에서는 이러한 문제를 해결하는 여러 방법과 언제 각 방법을 사용하는 것이 좋은지를 다룰 것이다.

Using editor and language features

• 많은 경우에, 이런 반복은 큰 문제가 되지 않는 경우가 많다(고한다). 왜냐하면 대부분의 경우에 이런 코드들은 다같이 한 장소에 모여 있거나(따라서 에디터의 멀티커서 사용 가능), 반복(iteration)을 통해 중복을 제거할 수 있기 때문이다.
• 이처럼 재사용해야 하는 스타일이 한 파일 안에만 있는 경우라면, multi-cursor editing과 loops가 중복을 관리할 수 있는 가장 간단한 해결책이 된다.
  • multi-cursor editing을 공식적인 해결책으로 설명하는 것이 뭔가 좀 짜치기는 하지만 실용적으로 나쁘지 않은 방법이긴 한거 같다.

Multi-cursor editing

• 중복이 한 파일안에, 가까이에 모여 있는 경우라면, multi-cursor editing이 가장 쉬운 해결책이 된다고 한다. 중독되는 class name들을 동시에 선택해서 수정할 수 있는 것이다.

  You’d be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there’s no benefit to introducing any additional abstraction.

  ****

  • practical하다고 해야되나.

Loops

• 컴포넌트를 추출하거나 새로운 custom class를 만들기 전에, 추출해낸 패턴을 실제로 두번 이상 재사용될지 확인해봐야 한다.

• 어떤 페이지 내에서 반복되는 디자인 요소는 루프를 통해 렌더하면 실제 마크업은 한번만 작성해도 되는 경우가 많다. 예를들어 맨 위에서 언급했던 디자인의 duplicate avatars의 경우, 실제 프로젝트에서는 대부분의 경우 루프로 작성될 것이다.

• map을 사용하는 방법도 포함된다.

  

Extracting components and partials

• 만약 특정 스타일을 여러 파일에 걸쳐서 사용해야 한다면, 가장 좋은 전략은 component나 partial을 만드는 것이다.
  • React, Svelt, Vue와 같은 front-end framework를 사용한다면 component를 만들면 되고,
  • Blade, ERB, Twig, Nunjucks와 같은 template language를 사용한다면 template partial을 만들면 된다.
• 그러면 style에 대한 single source of truth를 가지고 필요한 어떤 곳에서든지 재사용할 수 있기 때문에, 변경사항이 있을때도 한번에 관리할 수 있다.

Extracting classes with @apply