nextjs를 시작하면서 스타일링을 위해 tailwind를 사용하다 보니 공부를 하고 있다.
근데 어떤걸 사용해야 좋을지 고민이다.
tailwind를 사용하니 속도가 엄청 빠른데 동시에 가독성이 너무 안좋아진다...
이건 추후에 따로 다뤄보도록하고, group과 gradient를 짧게 정리해보려 한다.
group은 parent state를 기반으로 styling할 수 있도록 도와주는 어썸한 모디파이어다!
부모 element의 상태에 따라서 자식 element의 스타일을 주고싶을때, 부모 element의 class에 group을 추가해주고, group-* 으로 시작하는 모디파이어를 사용할수 있다.
ex) group-hover / group-focus-within
사실 이것만 잘 이용해도 Javascript가 필요한 많은 부분을 대체할 수 있다!
hover 예시
위 예시처럼 부모 element div위에 마우스가 올라갈때 자식 element의 스타일을 바꿀때 group을 사용하면 효과적으로 스타일을 구현할 수 있다!
div 내부에 위치해있는 span에 마우스가 올라갈때 변하는게 아니라, 부모 엘리먼트인 div위에 마우스가 올라갈때 부모를 포함한 자식 엘리먼트의 스타일이 변하는거다.
위와 같은 스타일을 tailwind group을 사용하지 않을때는 다양한 방법들이 있겠지만, 나는 아래와 같은 시퀀스로 구현했다.
- mouse over를 감지하는 state 만들기
- state를 toggle하는 function 만들기
- 부모 엘리먼트에 onMouseOver / onMouseLeave 이벤트 리스너 달기
- 자식 엘리먼트에 state를 기반으로 조건에 따른 스타일 구현하기
하지만 tailwind의 group을 사용하면 이보다 더 간결하게 스타일을 구현할 수 있다.
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>코드를 보면 부모 엘리먼트 <a> 태그에 group을 추가해주고, hover시 어떤 스타일을 줄지 명시해주고 있다.
그리고 자식 엘리먼트인 <svg>, <h3>, <p>의 class에는 group:hover라는 모디파이어를 사용해 부모 엘리먼트가 hover될때 어떤 스타일을 적용해! 라고 명시해주고있다.
group-focus-within
group-focus-within은 group container내의 어떤 자식이건 focus되어 있는지 확인할수 있는 모디파이어다!
<div className="group flex flex-col gap-4">
<input
className="w-full rounded-lg bg-gray-100"
placeholder="Enter your email"
type="email"
/>
<span className="hidden group-focus-within:block">
Make sure it is a vaild email
</span>
<button className="w-full rounded-lg bg-gradient-to-tr from-cyan-500 via-yellow-300 to-purple-400 ">
Submit
</button>
</div>따라서 부모 엘리먼트에게 group이라는 class를 추가하고, span 엘리먼트에 group-focus-within:block이라고 명시해준다.
그러면 부모 엘리먼트 내부에있는 어떠한 자식엘리먼트가 focus되면 span 엘리먼트에서 적어준것 처럼 해당 엘리먼트가 display block이 된다.
따라서 focus되는게 없을때는 hidden상태를 유지하고, user가 input을 클리하면 눈에 보이게 된다!
추가로 background를 linear gradient를 사용할때마다 문법이 기억이 안나서 구글에 검색해보고는 했는데, tailwind는 참 간단하게 사용할 수 있다!!!
linear gradient를 잘 사용하면 좀 더 완성도가 높아보이고 고급스러워 보일때가 많은데, tailwind로 이를 구현하는건 매우매우 직관적이다.
먼저 gradient의 방향을 정해주면 되는데 각도를 사용하지 않고 방향의 앞글자를 생각하면 된다.
to-t는 to top, to-tr은 to top right, to-br은 to bottom right 엄청 직관적이고 간단하지 않은가?
그리고 어떤 색으로 시작해서 어떤 색으로 끝나는지를 적어줘야하는데
from-cyan-500 via-yellow-300 to-purple-400 이렇게 적어주면 된다.
중간에 via-yello는 말그대로 yello를 거쳐서 가라는거고, 이 부분 없이 from - to만 잘 적어줘도 이쁘게 잘 나온다!
참고로 gradient 코드는 button을 통해서 확인할 수 있다.
참고
