🚀 Modifier란?

Handling Hover, Focus, and Other States - Tailwind CSS

hover, active 같은 css를 간단히 적용할 수 있음.

<button className="p-5 bg-blue-500 hover:bg-teal-300 active:bg-yellow-400">
  Checkout
</button>

• hover: , active: 과 같이 접미사를 붙인 후 원하는 클래스 넣으면됨.

🚀 중첩 Modifier

여러 modifier를 동시에 만족할 때 사용하려면 modifier를 : 로 붙여주면됨.

• first-letter:hover:text-black
• file:hover:bg-purple-500

| 순서는 중요하지 않다.

예시

<span className="hidden peer-focus:peer-invalid:block text-red-500">
  This input is invalid
</span>

🚀 알면 좋은 Modifier

empty

• list에서 값이 빈 것에 대응됨