[멋쟁이 사자처럼 프론트엔드 스쿨] 21일차 TIL - Tailwind

🍰 Tailwind 첫 진도!(지만 내일이 마지막 Tailwind 수업)

🍴 Tailwind

: 순풍 - 뒤에서 부는 바람. 유틸리티 클래스로 이루어진 CSS 프레임워크

=> 유틸리티가 무엇인가? https://kellyjs.tistory.com/36

Pre Built-in과 Utility-first

• 유틸리티 기반 개발 방식
• 클래스 방식으로 조립 - 모듈처럼 동작
• 커스터마이징 용이
• 로우레벨 프레임워크(속성 별로 쪼개져 있음)

🍴 설치하기 - 공식 홈페이지 참고

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

🍴 Tailwind 사용 시 유용한 익스텐션

https://marketplace.visualstudio.com/items?itemName=hunghg255.css-2-tailwindcss

Convert CSS to Tailwindcss - Visual Studio Marketplace

=> ctrl+shift+h

🍴 Tailwind 아직 익숙하지 않다! 싶을 때 참고

https://nerdcave.com/tailwind-cheat-sheet

Tailwind CSS Cheat Sheet

🍴 Tailwind의 peer 클래스

: 조건부 스타일링 적용 용이하게 도와줌

• 폼 컨트롤, 인터랙티브 요소에서 상태에 따라 스타일 변경하고 싶을 때 유용
• peer- 형식의 유틸리티 클래스와 함께 사용됨

<div>
    <input type="checkbox" id="toggle" class="peer">
    <label for="toggle" class="peer-checked:text-blue-500">Check me</label>
</div>
/* 체크박스 체크됐을 때 다른 요소의 스타일 변경 */