더 나은 Tailwind CSS 작성을 위한 팁과 요령

Tailwind CSS 작성? 다음은 Tailwind CSS를 사용하여 코드의 모양과 성능을 개선할 때 적용하는 몇 가지 팁과 요령입니다.

추가할 팁이 있습니까? Create a PR on GitHub .

상위 요소에 클래스 위임

잘못된

<ul>
  <li class="text-sm font-medium whitespace-nowrap">First</li>
  <li class="text-sm font-medium whitespace-nowrap">Second</li>
  <li class="text-sm font-medium whitespace-nowrap">Third</li>
</ul>

옳은

<ul class="text-sm font-medium">
  <li class="whitespace-nowrap">First</li>
  <li class="whitespace-nowrap">Second</li>
  <li class="whitespace-nowrap">Third</li>
</ul>

모바일에서 Flex 클래스 제거

잘못된

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>

옳은

<div class="sm:flex sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>

플로우 루트를 사용하여 균등한 간격 콘텐츠

잘못된

<ul class="space-y-8 divide-y">
  <li>First</li>
  <li class="pt-8">Second</li>
  <li class="pt-8">Third</li>
</ul>

옳은

<div class="flow-root">
  <ul class="-my-8 divide-y">
    <li class="py-8">First</li>
    <li class="py-8">Second</li>
    <li class="py-8">Third</li>
  </ul>
</div>

But this is more code

사실이지만…

몇 달 후에 어느 것이 더 이해가 잘 될까요?

첫 번째 예는 동적 내용에서 어떻게 작동합니까?

간격 콘텐츠에 대한 여백 바닥을 피하십시오

잘못된

<div>
  <div class="mb-4">Hello</div>
  <div>World</div>
</div>

옳은

<div>
  <div>Hello</div>
  <div class="mt-4">World</div>
</div>

What is the benefit, they do the same thing?

물론입니다. 하지만 콘텐츠가 동적이고 두 번째 요소가 없다면 어떻게 될까요? 첫 번째 요소 아래에 추가 공간이 생깁니다.

상위 클래스가 있는 중복 간격 클래스 제거

잘못된

<ul>
  <li>First</li>
  <li class="mt-8">Second</li>
  <li class="mt-8">Third</li>
</ul>

옳은

<ul class="space-y-8">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

정확한 전환 클래스 사용

잘못된

<button class="transition-all bg-red-500 hover:bg-red-600">Click</button>

옳은

<button class="transition-colors bg-red-500 hover:bg-red-600">Click</button>

But the class name is longer?

그것에 대해 논쟁할 수는 없지만 transition-all가 필요합니까? 아마 아닐 겁니다.

클래스 이름 길이를 절약하려면 transition를 사용하면 필요한 전환 효과의 99%를 커버할 수 있습니다.

색상 불투명도 클래스 사용

잘못된

<button class="relative">
  <span class="absolute inset-0 bg-red-500 opacity-50"></span>
  Click
</button>

옳은

<button class="bg-red-500 bg-opacity-50">Click</button>
<!-- With JIT -->
<button class="bg-red-500/50">Click</button>

CSS 파일에서 CSS 클래스 이름을 여러 줄로 분할

잘못된

.button {
  @apply inline-flex items-center rounded border text-sm px-5 py-3 transition hover:scale-105;
}

옳은

.button {
  @apply inline-flex items-center; // Layout
  @apply px-5 py-3 text-sm; // Spacing/Sizing
  @apply rounded border; // Style
  @apply transition; // Transition
  @apply hover:scale-105; // Interaction
}

How is this better? It's more code…

맞지만 읽기가 더 쉽고 모두 컴파일됩니다.

CSS 파일에서 구성 요소 생성 방지

Blade, React, Liquid 또는 Vue와 같은 구성 요소를 허용하는 템플릿 언어를 사용하는 경우에만 적용됩니다.

잘못된

<div class="card">
  <div class="card-title">Title</div>
  <div class="card-body">Title</div>
  <div class="card-footer">
    <div class="card-timestamp">15/05/2025</div>

    <div class="card-actions">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
</div>

그리고 CSS의 경우…

.card {
  @apply p-4 rounded;
}

.card-title {
  @apply text-lg;
}

.card-body {
  @apply mt-1;
}

.card-footer {
  @apply flex items-center justify-between;
}

.card-timestamp {
  @apply text-sm;
}

.card-actions {
  @apply flex gap-4;
}

옳은

<div class="p-4 rounded">
  <div class="text-lg">Title</div>
  <div class="mt-1">Title</div>
  <div class="flex items-center justify-between">
    <div class="text-sm">15/05/2025</div>

    <div class="flex gap-4">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
</div>

너비를 제한할 때 최대 너비 클래스 사용

잘못된

<div class="w-auto sm:w-64">
  <div>Hello World</div>
</div>

옳은

<div class="max-w-sm">
  <div>Hello World</div>
</div>

What's the benefit?

몇 가지가 있습니다:

기본적으로 반응합니다

.

레이아웃을 더 잘 설명합니다

.

이렇게 하는 것이 항상 가능한 것은 아닙니다.

그룹 접두사 클래스 이름

잘못된

<div class="\mt-4 sm:mt-0 text-lg sm:text-xl lg:text-3xl\">Hello World</div>

실례합니다\...\. Headwind의 포맷을 중지하기 위한 것입니다.

옳은

<div class="mt-4 text-lg sm:mt-0 sm:text-xl lg:text-3xl">Hello World</div>

Headwind과 같은 것을 사용하여 이를 수행할 수 있습니다.

중단점 클래스를 구체적으로 지정

잘못된

<div class="items-center justify-between sm:flex">
  <div>Hello</div>
  <div>World</div>
</div>

옳은

<div class="sm:flex sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>

What's the issue here?

사용하지 않는 추가 CSS를 모바일에 로드하고 있습니다. 이 예제에서는 과감하지 않은 것처럼 보일 수 있지만 전체 프런트엔드가 첫 번째 예제처럼 작성되었다고 상상해보십시오. 모바일에 많은 추가 CSS가 로드되고 있습니다.

Headwind 및 Tailwind CSS Intellisense 사용

역풍

GitHub Repo

Tailwind CSS 클래스 이름 정렬

중복 클래스 이름 제거

사용자 정의 클래스 이름을 클래스 이름 목록의 끝으로 이동

Tailwind CSS 인텔리센스

GitHub Repo

Tailwind CSS 클래스 이름 자동 완성(Tailwind CSS 구성에 추가된 클래스 포함)

Tailwind CSS 클래스 이름의 오류를 강조 표시함

각 Tailwind CSS 클래스로 생성된 CSS를 표시합니다

.