tailwindcss - transition-timing-function 기본값 설정

개요

프로젝트 진행 중 다크모드 전환 간 tailwindcss로 transition 값을 설정한 요소의 transition이 매끄럽지 않음을 발견하게 되어 이를 해결할 방법을 찾아보았다.

---

원인

tailwindcss로 transition을 설정할때 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);라는 값이 포함되는데, 이로 인해 기본 css로 transtion을 설정했을 때와 차이가 발생함을 확인했다.

---

해결 방법

transition-timing-function 값을 기본값으로 설정해주면 된다.
찾아보니 transition-timing-function의 기본값은 ease값이라고 한다. tailwindcss에서는 ease-[ease]

이게무슨이상한코드야

로 설정할 수 있다.

<div class="transition-all ease-[ease]">transition-timing-function 기본값 설정</div>

전

후

---

참고자료

tailwindcss transition 설명
tailwindcss transition-timing-function 설명
mdn web docs transition-timing-function 설명