[Tailwind CSS] Form(폼) 스타일

invalid:

: 유효하지 않는 입력값에 작동하는 스타일을 설정

<input type="email" class="invalid:focus:ring-red-500" />
<!-- 입력값이 유효하지 않고 focus된 상태에 스타일(ring-red-500) 적용 -->

 

 

 

*: 

: 해당 태그의 모든 자식 요소에 스타일 적용 (자식 선택자)

• 자식 선택자는 부모 요소의 자식들을 대상으로 스타일을 지정한다.

<div class="*:md:text-red-100">
  <p>텍스트1</p>
  <span>텍스트2</span>
</div>

 

 

 

peer-modifier:

: 형제 상태에 따라 스타일 지정

• 특정 요소의 상태가 변경되었을 때, 그 상태를 기준으로 다른 형제 요소의 스타일을 지정할 수 있다.
• 1) 상태를 감지할 형제 요소에 peer 클래스를 지정하고,
  2) 다른 형제 요소에는 peer 클래스를 적용한다.
• 🚨 peer 클래스를 사용할 때, 이전 형제 요소만 감지할 수 있다.
  • peer가 적용된 요소는 > 스타일을 적용하려는 요소보다 앞에 있어야 한다.

 

 

<label>
  <input type="email" class="peer" required />
  <span class="peer-invalid:text-red-500">Email</span>
  <!-- 입력 필드가 유효하지 않을 때 레이블의 텍스트가 빨간색으로 변경 -->
</label>

<div>
  <input type="text" class="peer focus:outline-none" placeholder="Type something" />
  <button class="peer-focus:bg-blue-500 bg-gray-300 text-white">Submit</button>
  <!-- 입력 필드에 포커스가 있을 때 버튼의 배경색이 파란색으로 변경 -->
</div>

 

 

 

has-[modifier or class]: 

: 해당 태그의 자식 요소 중 특정 class가 존재하는지 확인하여 스타일 적용 (수도 클래스)

• 자식을 기준으로 요소의 스타일을 지정할 수 있다.

<div class="has-[.peer]:bg-green-100">
  <input class="peer" type="text" />
</div>

<form class="has-[:invalid]:bg-red-100">
  <input type="email" required />
</form>

 

---

 

Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS

 

Handling Hover, Focus, and Other States - Tailwind CSS