[TIL]Tailwind css

오늘 공부한것 & 기억할 내용

Tailwind css

• className을 읽고 추출하여 실제 css코드로 만들어준다.

peer

• 형제 요소에게 영향을 끼치거나 받을때 사용한다.

<input type="checkbox" id="box1" className="peer hidden" />
<span className="peer-checked:flex peer-checked:items-center peer-checked:justify-center"></span>

group

• 부모의 상태에 따라 하위요소들이 style를 설정할 수 있다.

<li className="group">
	<span className="group-hover:color#000">
</li>

*:

• 하위 요소들에게 공통된 style을 줄때 사용

<div className="*:text-xl">
	<p></p>
    <span></span>
</div>

animate

• tailwind에서 제공하는 animation기능

<p className="animate-ping">
//-ping , -spin, -pulse, -bounce 등등

[]

• 원하는 값을 커스텀하여 사용할때 쓰는 코드

<span className="h-[26.5px] bg-[#000]"></span>

@apply

• global.css에 css를 넣을때 사용
  

<span className="btn"></span>

@layer

• global.css의 base,component,utilities에 추가하거나 확장하고 싶을때 사용한다
  

배운점 & 느낀점

tailwind에 배웠는데 오랫동안 css로 코드구현을 해온 나로서는 더 번거롭고 어떤점이 좋은건지 이해가 안됐는데 tailwind만 쓰는게 아니라 plugin에 컴포넌트 라이브러리를 설치하여 같이 쓰는게 더 효율적으로 보였다.
컴포넌트 라이브러리 daisyui