일찍 알았다면 좋았을 TailwindCSS 클래스 8가지

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

- YouTube

www.youtube.com

 - YouTube

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 2월 17일 오전 8:23

 • 

저장 101조회 4,007

댓글 2