TailwindCSS는 그만한 가치가 있습니까?

TailwindCSS는 그만한 가치가 있습니까? Tailwind는 약간의 CSS를 알기 위해 그것을 사용하는 개발자에 의존하는 유틸리티 CSS 프레임워크입니다. 가볍게 의견이 있지만 간단합니다. 이러한 점들을 함께 사용하면 익숙하지 않은 개발자가 사용하기가 더 어려워집니까?

Tailwind는 유틸리티 CSS 프레임워크이므로 제공된 모든 클래스가 유틸리티임을 의미합니다. 이러한 유틸리티는 텍스트 형식에서 가변 상자 관리 등에 이르기까지 다양합니다. 전:

flex flex-row justify-center
이건 괜찮아. 하지만 이러한 클래스가 익숙하다는 것을 눈치채셨나요? 내 말은 정말 그들을 봐. 추가 번거로움 없이 평범한 오래된 CSS처럼 보입니다! 예를 들어:

display: flex; flex-direction: row; justify-content: center;
된다

flex flex-row justify-center
이것이 어떻게 유용할 수 있는지 자문할 수 있습니다. 학습 곡선을 저장하고 일반 CSS를 인라인이나 스타일시트에 작성할 수 있다고 스스로에게 말할 수도 있습니다. 사실일 수도 있습니다. 그러나 Tailwind의 요점과 그것이 해결하는 문제를 놓치게 될 것입니다. 클래스와 같은 거의 평범하고 오래된 CSS는 실제로 빠른 프로토타이핑 및 효과와 같은 일반 개발이 직면하는 많은 문제를 해결하는 데 사용할 수 있습니다.

Tailwind가 얼마나 강력한지 보여주기 위해 부트스트랩 팬을 위한 간단한 카드 예시를 만들어 보겠습니다. (예. 카드 구성 요소를 정기적으로 과도하게 사용하고 있다는 것을 알고 있습니다.) 인라인 CSS 및 Tailwind를 사용하여 카드의 소스를 표시합니다. 이렇게 하면 차이점을 볼 수 있습니다.

<div class="w-1/3 mx-auto my-2 shadow-sm rounded-lg">
    <div class="bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg">Header</div>
    <div class="bg-white text-gray-600 p-3 rounded-b-lg">
      This is a card example in Tailwind CSS.
    </div>
  </div>

  <div style="width: 33.33%; margin: 1rem auto; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 7.5px;">
    <div style="background-color: #f4f5f7; color: #4b5563; padding: .6rem .75rem; font-weight: 520; font-size: 1.1rem; border-top-left-radius: 7.5px; border-top-right-radius: 7.5px;">Header</div>
    <div style="background-color: white; color: #4b5563; padding: .75rem; border-bottom-left-radius: 7.5px; border-bottom-right-radius: 7.5px;">This is a card example in inline CSS.</div>
  </div>

이는 아래 이미지로 렌더링됩니다.


괜찮아. 따라서 Tailwind는 모든 것을 인라인으로 작성하는 경우 약간의 시간과 오버헤드를 절약합니다. 그러나 이것은 유지 관리가 불가능합니다! 모든 태그로 이동하여 업데이트해야 하는 경우 사이트를 어떻게 업데이트해야 합니까? Tailwind는 위에서 한 것처럼 신속하게 프로토타입을 만든 다음 실제 시맨틱 CSS 클래스로 변환하기 위한 것입니다. 다른 CSS 프레임워크를 사용했거나 자신만의 클래스를 작성한 적이 있다면 다음과 같이 인식할 것입니다.

.card {}
Tailwind는 시맨틱 CSS로 프로토타입을 만든 모든 스타일을 컴파일할 수 있는 NPM을 사용하여 설치한 경우 유틸리티를 제공합니다. 여기까지 오는 방법을 이해하려면 이 페이지guide를 따르십시오. 이 안내서를 읽은 후 계속 읽으십시오! 또는 TailwindCSS 설치 및 설정에 이미 익숙하다면 계속 진행하세요.

프로토타입 구성 요소가 있으면 이를 사용하기 쉬운 클래스로 쉽게 변환할 수 있습니다. 시맨틱 클래스의 이름을 지정하고 "클래스"태그 안에 모든 항목을 추가하기만 하면 됩니다. 전:

.card {
    @apply "mx-auto my-2 shadow-sm rounded-lg";
}

.card-header {
    @apply "bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg";
}

.card-body {
    @apply "bg-white text-gray-600 p-3 rounded-b-lg";
}

새로운 시맨틱 CSS 클래스를 사용하여 이제 구성 요소를 변환할 수 있습니다! 긴 유틸리티 클래스 목록을 시맨틱 클래스로 바꾸십시오. 전:

<div class="w-1/3 card">
    <div class="card-header">Header</div>
    <div class="card-body">
      This is a card example in Tailwind CSS.
    </div>
</div>

우와! 그게 훨씬 깨끗해! Tailwind를 사용하는 방법을 알고 연습을 하면 Tailwind가 왜 가치가 있는지 금방 알 수 있습니다! 시맨틱 CSS 클래스로 쉽게 다시 변환할 수 있는 권한을 부여하면서 더 큰 디자인 프로젝트에서 시간을 절약할 수 있습니다! Tailwind는 또한 "flex-direction: row"와 같은 오버헤드 문을 줄이고 "flex-row"처럼 간단하게 만들기 때문에 평범한 오래된 CSS에 익숙하지 않은 사람들에게도 강력합니다!

내 생각에 Tailwinds 학습 곡선은 실제로 CSS를 배우는 것보다 CSS 경험이 거의 또는 전혀 없는 사람들에게 더 간단합니다. 유지 관리 가능한 소스 코드로 컴파일하면서 모든 규모의 팀이 더 빠르게 프로토타입을 제작할 수 있습니다. CSS 전문가에게도 도움이 됩니다! 이 기사를 즐겼고 더 자세히 알아보려면 Tailwinds 웹사이트here를 방문하세요!