[Tailwindcss] 클래스 그룹화

tailwindcss 를 사용하다 보면 현란한 유틸리티 클래스들에 눈이 쾡 해지는 경험을 하게 됬다.
생산성이 너무 좋은데 추후에 가독성이 떨어짐이 있었는데 보니 css 를 그룹화 할 수 있게 되었다.

Before

<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
  <thead>
    <tr>
      <th scope="col" class="px-6 py-3 text-xs font-medium text-left text-gray-500 uppercase">Blog Name</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
    <tr>
      <td class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap dark:text-gray-200">JKUN.NET</td>
    </tr>
  </tbody>
</table>

이렇게 위와 같이 있으면 읽기가 빡씨다..
그런데 이것을 그룹화 시키면 보다 더 구조화하고 가독성을 향상시키며 간단하게 사용할 수 있다.

CSS

@layer utilities {
	.table-basic {
		@apply min-w-full text-xs divide-y divide-gray-200 dark:divide-gray-700
	}
	.table-basic thead {
		@apply bg-gray-50 dark:bg-slate-800 dark:text-gray-200
	}
	.table-basic thead th {
		@apply px-6 py-3 text-center
	}
	.table-basic tbody {
		@apply divide-y divide-gray-200 dark:divide-gray-700 dark:text-gray-400
	}
	.table-basic tbody td {
		@apply px-6 py-3 whitespace-nowrap
	}
}

HTML

<table class="table-basic">
  <thead>
    <tr>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JKUN.NET</td>
    </tr>
  </tbody>
</table>

이제 한숨 크게 놓인다. ㅎㅎㅎ;; 
너무 늦게 알았어.. ㅠㅠ;