Tailwind의 유틸리티 우선 접근 방식이 인라인 스타일 이상인 이유

우리는 1년 넘게 우리 회사의 내부 디자인 시스템에 Tailwind CSS를 사용하고 있으며 완벽하게 작동하고 있습니다. Tailwind를 처음 접하는 대부분의 개발자는 처음에는 회의적이지만, 첫 번째 구성 요소를 작성한 후 설정을 수용합니다. 특히 디자인 시스템과 같은 제한된 환경에서 매우 의미가 있기 때문입니다.

이 게시물에서는 Tailwind의 유틸리티 우선 접근 방식과 인라인 스타일과 관련이 없는 것이 무엇인지 설명하고 싶습니다.

역사적으로 스타일은 CSS 클래스로 추상화되었습니다...

역사적으로 CSS 스타일은 HTML 마크업에서 쉽게 사용하기 위해 CSS 클래스로 추상화되었습니다.

.my-component {
  width: 100%;
  padding: 1.25rem;
  border-radius: 9999px;
  background-color: black;
}

.my-component--text {
  color: white;
  font-weight: bold;
}

따라서 구성 요소에서 이러한 스타일을 사용하고 싶을 때마다 다음과 같이 해당 HTML 요소에 클래스 이름을 추가하기만 하면 됩니다.

<div class="my-component">
  <strong class="my-component--text">Hello world</strong>
</div>

인라인 스타일 속성을 사용하여 스타일을 정의하면 구성 요소의 불필요한 중복, 가독성 및 유지 관리 불량으로 이어질 수 있으므로 이는 특히 의미가 있습니다.

... 하지만 요즘은 추상화가 구성 요소입니다.

React, Vue, Angular 또는 Svelte와 같은 최신 JavaScript 프레임워크 및 라이브러리에는 또 다른 추상화가 있습니다. 바로 구성 요소입니다.

위의 React 예제는 다음과 같이 추상화할 수 있습니다.

const MyComponent = ({ children }) => (
  <div class="my-component">
    <strong class="my-component--text">{children}</strong>
  </div>
);

이제 구성 요소를 사용할 때 스타일에 대해 전혀 생각할 필요가 없습니다. 그냥 써:

<MyComponent>Hello world</MyComponent>

이 접근 방식은 CSS 사용에 대한 생각의 전환으로 이어졌습니다. 갑자기 인라인 스타일이 다시 이해가 되었습니다. 구성 요소 자체 내에서 한 번만 작성되기 때문에 스타일 정의를 추상화할 필요가 없습니다.

Tailwind 접근 방식

Tailwind는 거의 항상 한 가지만 수행하는 많은 CSS 클래스를 제공합니다. 이러한 클래스를 유틸리티 클래스라고 합니다. 목적이 너무 제한적이기 때문에 여러 곳에서 재사용하기에 완벽합니다.


유틸리티 클래스
CSS 속성

.w-fullwidth: 100%;.w-autowidth: auto;.mt-5margin-top: 1.25rem;.mb-5margin-bottom: 1.25rem;
...
...


그러나 이것은 인라인 스타일을 작성하는 멋진 방법일 뿐입니다.

사람들은 Tailwind 유틸리티 클래스를 인라인 스타일과 계속 비교하며 나는 확실히 이해합니다. 그러나 큰 차이가 있습니다. Tailwind 클래스는 Tailwind의 구성 파일에 정의한 내용에 따라 제한됩니다.

구성에서 색상, 간격, 글꼴, 크기 등을 정의하여 유틸리티 클래스로 변환합니다. 이것은 Tailwind 클래스를 고수할 때 원하는 스타일을 작성할 수 없지만 이전에 정의된 것으로 제한된다는 것을 의미합니다. 이것은 큰 차이입니다.

디자인 시스템에서 Tailwind의 구성은 구성 요소를 만드는 데 사용되는 "토큰"으로 생각할 수 있습니다.

Tailwind가 있는 위의 구성 요소는 다음과 같습니다.

const MyComponentWithTailwindStyles = ({ text }) => (
  <div className="w-full p-5 rounded-full bg-black">
    <strong className="text-white font-bold">
      {text}
    </strong>
  </div>
);

또한 보다 포괄적인 설명을 보려면 Tailwind 문서를 확인하십시오. https://tailwindcss.com/docs/utility-first

Tailwind에 대해 어떻게 생각하십니까?