TailwindCSS #4 | Ring Utility, Transition

Ring Utility

개요

• Modifier 는 아니지만 Modifier 와 함께 멋진 효과를 낼 수 있습니다.
• React, State 등의 도움이 필요없습니다.

예시

• <button> className="focus:ring-2 ring-offset-2" />

Transition

개요

• 기본 CSS의 transition 적용시 cubic-bezier 등 다양한 설정을 모던한 스타일로 자동지정해주고 커스터마이즈도 가능합니다.

예시

• <button> className="focus:ring-2 ring-offset-2 transition" />