Tailwind2

Tailwind2

Modifiers

• 반응형 디자인
• 스타일을 조건부로 사용할 수 있게 해줌
• modifier는 항상 끝에 : (colon)을 가지고 있음

• 조건이 참일 때 적용

• transition : 애니메이션이 부드럽게 전환될 때 사용
• 두 가지 다크모드 전략
  1. 사용자의 기본 설정 따라가기
  2. 클래스의 이름을 통해서 구현 하는 방법

Tailwind Variables

• active: : 클릭해야 작동하는 state
• ring과 outline의 차이점 :
  1. 구현 방식:
  • ring: Tailwind CSS의 유틸리티 클래스이며, box-shadow를 사용하여 구현됨.
  • outline: 기본 CSS 속성이며, 요소의 경계 외부에 그려짐.
    1. 조정 가능성:
  • ring: 두께, 색상, 투명도, 오프셋 등을 세밀하게 조정 가능.
  • outline: 두께, 색상, 스타일을 설정할 수 있지만, 세부적인 조정 옵션은 제한적임.
    1. 레이아웃 영향:
  • ring: 요소의 레이아웃과 크기에 영향을 줄 수 있음.
  • outline: 요소의 레이아웃과 크기에 영향을 주지 않음.
    1. 브라우저 지원:
  • ring: Tailwind CSS를 사용해야 하며, 기본 CSS에서는 제공되지 않음.
  • outline: 모든 브라우저에서 기본적으로 지원됨.

Responsive Modifiers

• Tailwind CSS는 모바일 우선임
• 작은 기기 우선으로 적용됨

Form Modifiers

peer : 상태 기반 스타일링을 위해 사용되는 클래스이다.
peer 클래스를 사용하면 특정 요소의 상태에 따라 다른 요소의 스타일을 변경할 수 있다.
주로 양식 유효성 검사 및 사용자 인터랙션에 기반한 스타일 변경에 유용함.

<input className="w-full rounded-full h-10 bg-gray-200 pl-5 outline-none ring ring-transparent focus:ring-green-500 focus:ring-offset-2 transition-shadow placeholder:drop-shadow invalid:focus:ring-red-500 peer" type="email" required placeholder="Search here..." />  
        
      <span className="text-red-500 font-medium hidden peer-invalid:block">Email is required.</span>  

동작 방식
사용자가 <input> 필드에 잘못된 이메일 형식을 입력하거나 아무것도 입력하지 않으면, 브라우저의 기본 유효성 검사에 의해 <input> 요소는 invalid 상태가 된다.
<input> 요소가 invalid 상태가 되면, peer-invalid 클래스가 활성화된다.
<span> 요소는 peer-invalid:block 클래스에 의해 숨김(hidden) 상태에서 표시(block) 상태로 전환된다.
사용자에게 “Email is required.”라는 메시지가 표시된다.