- YouTube
www.youtube.com
TailwindCSS의 유용한 클래스들을 소개하는 영상을 보고 핵심 내용을 정리해보았습니다.
Divide: 요소들 사이에 보더를 넣고 싶을 때 사용
ex: divide-x
, divide-violet-600
Scroll Snap: 캐러셀 구현을 도와주는 유틸리티
ex: scroll-snap-container
, snap-x
, snap-center
SR Only: 스크린리더에서만 제공하고 싶은 요소에 사용 (시각적 표시 X)
ex:
<button>
<SettingsIcon />
<span className="sr-only">Settings</span> // 스크린리더 사용자만 확인 가능
</button>
Accent Color: 폼 요소 강조 색깔 지정 (ex: 체크박스 선택됬을 때 색깔)
ex: accent-violet-600
Outline and Carrot: 요소 아웃라인과 커서 색깔 지정
ex: outline-violet-600
, caret-violet-600
Gradients: 그라데이션 지정
ex: bg-gradient-to-r
, from-color
, via-color
, to-color
Animations: 테일윈드 내장 애니메이션
ex: animate-ping
Space Between: Flex나 Grid 없이 요소 사이 간격 조정 (margin 기반)
space-y-2
, space-y-4
(Y축 간격 조정)
https://www.youtube.com/watch?v=mjL_vrNo1fQ&ab_channel=TomIsLoading
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 2월 17일 오전 8:23
저 혹시 carrot이 아니라 caret 아닌가요??
@서채원 맞네요. 수정했습니다! :)