[TIL] Tailwind CSS 기초 - 4 (odd, even, first, last, animate, empty, group)

오늘 공부한것 & 기억하고 싶은 내용

odd:

• 자식 요소 중 홀수번째에만 스타일 줄때 사용 odd:bg-gray-100
• CSS에서 :nth-child(odd) 에 해당

even:

• 자식 요소 중 짝수번째에만 스타일 줄때 사용 even:bg-cyan-100
• CSS에서 :nth-child(even) 에 해당

first:

• 첫번째 자식 요소를 선택할 때 사용 pt-5 first:pt-0
• CSS에서 :first-child
• 반응형에도 사용 가능하다. (first:md:pt-0)

last:

• 마지막 자식 요소를 선택할 때 사용 border-b-2 last:border-b-0
• CSS에서 :last-child
• 반응형에도 사용 가능하다. (last:md:border-b-0)

animate

• spin, ping, pulse, bounce 4가지가 있다.(정~말 유용함)
• loading state를 pulse animation을 이용해 만들 수 있다.
• animate는 로딩, 알림, UI 효과 등 다양한 인터랙션을 쉽게 구현할 수 있다.

animate-bounce

• animate-bounce는 말그대로 지정한 영역이 바운스함!!!

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}

animate-spin

• animate-spin는 모래시계 등 로딩될때 넣어주면 계속 돌아감

<div className="size-6 bg-red-500 text-white flex items-center justify-center rounded-full animate-spin">
	<span>⌛️</span>
</div>

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

animate-pulse

• animate-pulse는 특히 스켈레톤 만들때 유용하다.(스켈레톤이란? 뼈대를 나타내며 더미 영역이다.loading될때 영역을 잡아주는 것)
• 로딩 되기 전 영역들에 미리 뼈대를 만들어두고 깜빡거리는 효과를 줄 수 있다.

<div className="flex items-center gap-5 animate-pulse">
  <div className="size-10 bg-blue-400 rounded-full" />
  <div className="w-40 h-4 rounded-full bg-gray-400" />
  <div className="w-20 h-4 rounded-full bg-gray-400" />
</div>

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

animate-ping

• notifications에서 사용할 수 있다.
• 두가지 원을 만들어서 겹친 다음에 animate-ping을 주면 가장자리 뒷 배경이 뿌옇 느낌으로 깜빡거림의 효과를 줄 수 있다.

<div className="size-6 bg-red-500 text-white flex items-center justify-center rounded-full relative">
  <span className="z-10">1</span>
  <div className="size-6 bg-red-500 rounded-full rounded-ful absolute animate-ping" />
</div>

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

empty:

• 값이 비어있다면 ~ 스타일을 지정해줄 수 있다.

<div className="bg-white shadow-lg p-5 rounded-3xl w-full max-w-screen-sm flex flex-col md:flex-row gap-3">
        {["yeah", "Me", "You", "Yourself", ""].map((person, index) => (
          <div key={index} className="flex items-center gap-5">
            <div className="size-10 bg-blue-400 rounded-full" />
            <span className="text-lg font-medium empty:w-24 empty:h-5 empty:rounded-full empty:bg-gray-300 empty:animate-pulse">
              {person}
            </span>
            <div className="size-6 bg-red-500 text-white flex items-center justify-center rounded-full relative">
              <span className="z-10">{index}</span>
              <div className="size-6 bg-red-500 rounded-full rounded-ful absolute animate-ping" />
            </div>
          </div>
        ))}
      </div>

.empty\:bg-gray-300:empty {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) /* #d1d5db */;
}

• 마지막 요소의 값이 비어있을때 empty:w-24 empty:h-5 empty:rounded-full empty:bg-gray-300 empty:animate-pulse 로 클래스를 지정해준다면 스켈레톤을 만들 수 있다.

group

• group modifier는 부모의 상태(state)에 따라서 자식을 변경하는 것을 도와준다.
• 일부 상위 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 상위 요소를 group 클래스로 표시하고, group-hover와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정

<ul class="transition">
      <li class="group flex cursor-pointer items-center gap-2 text-3xl transition hover:text-white">
        <span class="flex size-5 items-center justify-center rounded-full bg-black text-xs font-thin uppercase text-white transition group-hover:bg-white group-hover:text-yellow-300">T</span>
        <strong class="font-medium">Test</strong>
      </li>
</ul>

.group:hover .group-hover\:text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1)) /* #fde047 */;
}

• group은 hover 뿐만 아니라 ide 자동왼성으로 보면 수많은 기능들이 있다.
• hover 다음으로 유용할 것은 focus within이다. (group invalid도 유용함)

group-focus-within:

• group container의 어떤 자식이건 포커스 되어있는지를 확인해주는 것이다.
• group이 말 그대로 within 내부에 focus를 갖고 있다면~ 이라는 의미

<div className="group">
  <input type="email"
         placeholder="Write your email"
         className="bg-gray-100 w-full"
         />
  <span className="group-focus-within:block hidden">
    Make sure it is a valid email...
  </span>
  <button>Submit</button>
</div>

.group:focus-within .group-focus-within\:block {
  display: block;
}

배운점 & 느낀점

css에도 있는 코드들이지만 간단하게 테일윈드로 클래스 입력만으로도 스타일이 꾸며지고 있다.
내가 css를 알고 있기 때문에 엄청 편하지는 않지만 css를 모르는 사람들은 테일윈드만 알아도 디자인을 할 수 있으니 얼마나 편리한가!
클래스명도 직관적이라 css 만들때도 참고하면 좋을거 같고, empty, :focus-within는 css에 있지만 잘 사용하지 않았던건데 덕분에 알게 되었다.
animate 부분은 정말 편한거 같다. 만들어진 코드들로 디자인을 확인해보니 디자인이 아주 세련되어서 ui적으로도 너무 좋은거 같다. 테일윈드... 회사에서 써보고 싶다.