Tailwind CSS 코드를 정리하는 간단한 방법

Tailwind CSS가 마크업을 매우 지저분하게 만들 수 있다는 것은 비밀이 아니지만 이를 방지하기 위해 몇 가지 조치를 취할 수 있습니다. 가장 일반적인 방법은 클래스를 부모 요소에 위임하는 것입니다.

다음 예를 들어보십시오.

<ul>
  <li class="text-sm font-medium text-gray-900">...</li>
  <li class="text-sm font-medium text-gray-900">...</li>
  <li class="bg-gray-100 text-sm font-medium text-gray-900">...</li>
</ul>

여기에는 <li> 요소에 대한 세 개의 반복 클래스가 있습니다.

text-sm

font-medium

text-gray-900

이러한 클래스를 부모<ul> 요소로 이동하고 CSS 캐스케이드를 다운하면 도움이 될 수 있습니다.

<ul class="text-sm font-medium text-gray-900">
  <li>...</li>
  <li>...</li>
  <li class="bg-gray-100">...</li>
</ul>

팔! HTML이 정리되었습니다.

하지만 부모에게 위임할 수 없는 클래스를 사용한다면 어떻게 될까요?
whitespace-nowrap , px-8 , rotate-3 등과 같은 클래스는 계단식을 통해 상위에서 하위 요소로 적용될 수 없습니다.

그러나 해결책이 있습니다…

JIT 입력

JIT가 무엇인지 잘 모르겠다면 여기 내 블로그의 간단한 설명이 있습니다.

Since v3, JIT has been the default in Tailwind CSS and has bought a lot of power to the framework. One of the best additions are arbitrary values, these allow you to replace custom CSS with Tailwind CSS like classes.

이 예를 사용합시다.

<ul>
  <li class="whitespace-nowrap p-4 text-sm font-medium">...</li>
  <li class="whitespace-nowrap p-4 text-sm font-medium">...</li>
  <li class="whitespace-nowrap bg-gray-100 p-4 text-sm font-medium">...</li>
</ul>

여기에는 4개의 반복 수업이 있습니다.

whitespace-nowrap

p-4

text-sm

font-medium

그러나 부모에게 위임할 수 있는 것은 2개뿐이다.

text-sm

font-medium

다음은 JIT가 없는 경우의 모습입니다.

<ul class="text-sm font-medium">
  <li class="whitespace-nowrap p-4">...</li>
  <li class="whitespace-nowrap p-4">...</li>
  <li class="whitespace-nowrap bg-gray-100 p-4">...</li>
</ul>

보시다시피 모든 p-4 요소에 대해 whitespace-nowrap 및 <li>가 반복됩니다.

JIT로 클래스 위임

다음은 JIT를 사용한 예제의 모습입니다.

<ul class="text-sm font-medium [&>*]:whitespace-nowrap [&>*]:p-4">
  <li>...</li>
  <li>...</li>
  <li class="bg-gray-100">...</li>
</ul>

혼란스러워 보일 수 있지만 [&>*]는 CSS이므로 간단합니다.

이렇게 쓰는 것도 마찬가지입니다.

& > * {
  //
}

로 번역됩니다.

Select all first level children within this element

이 예에서 &는 <ul>이고 *는 <li> 요소입니다.

이것이 CSS에서 어떻게 보이는지 보여줍니다.

ul > li {
  //
}

그리고 우리가 하는 일은 CSS를 적용하지만 Tailwind CSS 유틸리티를 사용하는 것뿐입니다.

ul {
  font-size: 0.875rem; // text-sm
  line-height: 1.25rem; // text-sm
  font-weight: 500; // font-medium
}

ul > li {
  white-space: nowrap; // whitespace-nowrap
  padding: 1rem; // p-4
}

다음은 HyperUI의 추가 정보built-out example using a table component입니다.


임의의 클래스에는 몇 가지 단점이 있기 때문에 저는 이 접근 방식에 대해 울타리를 치고 있습니다.

읽기에 혼란스러움

쓰기에 혼란스럽다

지저분한 마크업

This post is called "One Simple Trick to Cleaning Up Tailwind CSS Code" and yet a downside of arbitrary classes is "messy markup"

의견에 가깝습니다. 처음에는 임의의 클래스가 지저분해 보인다고 생각했지만 올바르게 사용하면 Tailwind CSS 코드를 정리하는 데 정말 도움이 될 수 있습니다.

물론 선택 사항입니다. 사용할 필요/요구 사항이 없습니다.