Tailwind 팁: 한 줄의 코드로 긴 유틸리티 클래스 목록 관리

한 줄에 많은 유틸리티 클래스 목록을 관리하는 것은 다루기 어려울 수 있습니다.

다음은 코드를 더 읽기 쉽고 관리하기 쉽게 만드는 데 도움이 되는 Tailwind의 내장 기능 @apply입니다.

맞춤 CSS에서 @apply 사용

Tailwind의 @apply 지시어를 사용하면 여러 Tailwind 유틸리티를 그룹화하여 재사용 가능한 CSS 클래스를 만들 수 있습니다. 이렇게 하면 HTML의 클래스 수를 줄이고 구성 요소를 더욱 체계적으로 유지하는 데 도움이 됩니다.

예:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

그런 다음 Tailwind 유틸리티를 반복하는 대신 HTML에서 이 새로운 .btn-primary 클래스를 사용할 수 있습니다.

<버튼>



<p>도움이 되었다면 다음을 지원해 보세요.<br>
https://buymeacoffee.com/kaleemelahi</p>


<hr>

<p><strong>더 많은 내용을 보려면 팔로우하세요:</strong><br>
링크드인<br>
깃허브</p>


          

            
        

위 내용은 Tailwind 팁: 한 줄의 코드로 긴 유틸리티 클래스 목록 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!