Enjoy Programming

tailwind를 사용하던 중 오랜만에 slide animation을 구현할 일이 생겼다. 신규 beta launching 한 사이트 navigation에 text sliding 이다. 우선 거두 절미 tailwind에 custom animation은 tailwind config에서 이런식으로 설정 해주면 된다.. 근데.. 마우스를 올리면 해당 animation을 paused 시키고 싶었다. 찾아보니 css property 중에 animation-play-state 라는 것이 존재 했다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state animation-play-state - CSS: Cascading Style Sheets |..

-- 기록용 --- tailwind css를 사용하며 input number에 화살표를 없애고 사용하는 것을 default로 설정하고 싶어졌다. 알아보던 중 tailwind Css에서 사용자 정의 Css 규칙을 추가하는 경우 가장 쉬운 방법은 존역 css에 style을 추가하는 것이다. @layer라는 지시문을 이용해서 tailwind의 base, components, utilities 계층에 스타일을 추가할 수 있다. 이런식으로

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다) 뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다. 기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게 간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다. 뭐 그냥 css in html로 tag하나..