[최종프로젝트] 테일윈드 (tailwind CSS)

테일윈드 css는 공백을 허용하지 않는다

임의값을 넣으려면 -[값단위]

여러 값을 넣으려면 언더바로 구분해줘야 한다(_)

 className='h-[300px] w-[300px] rounded-full shadow-[0px_2px_10px_5px_rgba(255,255,255,0.534)]'
 // shadow-[0px_2px_10px_5px_rgba(210,137,176,0.5)]

---

플레이어 삭제 체크박스

삭제된 상태에 css를 넣으려면 checked를 활용할 것

  const checkedStyle =
    'checked:bg-[#685BFF] checked:border-[1.5px] checked:border-[#685BFF] checked:bg-check'
  const checkedShadow =
    'checked:shadow-[0px_4px_4px_rgba(0,0,0,0.1),0px_0px_0px_0.5px_rgba(0,0,0,0.1)
    ,0px_0px_0px_2.5px_rgba(104,91,255,0.3),0px_0px_0px_2px_rgba(0,0,0,0.2)
    ,inset_0px_-2px_1px_rgba(255,255,255,0.2),inset_0px_2px_1px_rgba(0,0,0,0.1)]'

 

* 내가 원하는 css를 구글 검색 후 테일윈드 공식문서에서 찾아보자(무턱대고 바로 공문부터 보면 한참 걸림...)