프로젝트에 디자인 시스템이 있어야 합니다

디자인 시스템을 고려하지 않았다면 클래스 목록에 'p-[123px] mb-[11px] gap-[3px]'와 같이 알아보기 힘들게 작성하거나 간격 설정에 15px, 16px, 17px와 같은 새 토큰을 많이 추가 해야 하는 상황이 생김

.button {
  background-color: oklch(45% 0.2 270);
}
.tab {
  background-color: oklch(45% 0.2 270);
}

// original css to tailwind

module.exports = {
  theme: {
    colors: {
      primary: 'oklch(45% 0.2 270)'
    }
  }
}

class="bg-primary"

컴포넌트 기반 접근 방식을 사용하고 있어야 한다

<button class="bg-yellow-700 border-2 font-semibold border border-gray-300 text-green p-4 rounded">
	Custom Button
</button>

<CustomButton>Custom Button</CustomButton>

Tailwind 개발자는 문서에서도 @apply 지시문을 주의해서 사용하는 것이 중요하다고 강조했습니다.