Tailwind CSS를 유용하게 쓰는 방법

TailwindCSS를 사용하면서 유용하게 쓰일 수 있는 클래스들에 대해 정리해보려고 한다.

• Divide: 요소들 사이에 구분선을 넣고 싶을 때 사용할 수 있다.

  <div className="grid grid-cols-3 divide-x"></div>

• SR Only: 스크린 리더에게서만 제공하고 싶은 요소에 사용한다. 접근성을 개선하는 데 유용하다.

  <span class="sr-only">Go to Homepage</span>

• Gradient: 그라데이션을 지정하고 싶을 때 사용한다. 처음과 끝만 지정할 수도 있고, 중간에 값을 추가하는 것도 가능하다. 시작하는 색은 from-${color}, 중간 색은 via-${color}, 마지막 색은 to-${color}로 지정할 수 있다.

  <div class="... bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

• Animation: 간단한 애니메이션이 필요할 때 유용하게 사용할 수 있다. 통통 튀는 효과를 주는 bounce, 스켈레톤을 만들기에 유용한 pulse 등이 있다.

  <svg class="animate-bounce ...">
  <!-- ... -->
  </svg>

• Space Between 요소들 사이의 간격을 추가하는 데 유용하게 사용할 수 있다.

  <div class="... flex space-x-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
  </div>

• Container 중앙 정렬

  div에 보통 Container class를 많이 사용하는 데, Container를 중앙으로 정렬하기 위해, margin에 관한 class인 mx-auto의 추가가 필요하다. tailwind.config.js 파일에 아래 내용을 추가함으로써 이를 해결할 수 있다.

  theme: {
    container: {
        center: true,
    },
  }