TailwindCSS #6 | Form Modifier (group, peer)

Form Modifier

Hover Modifer 활용

1. 컨터이너, 래퍼 박스에 group 클래스네임을 줍니다.
2. 해당 박스에 Hover 되었을때 변화를 주고 싶은 태그 클래스네임에 group-hover:bg-red-300 과 같이 줍니다.
3. 변화를 주고싶은 클래스네임에 transition-colors 를 적어주면 transition 도 적용됩니다.

Group

• 위의 간단한 hover 적용에서부터 아주 다양한 부분까지 기능을 제공합니다.
• Form 에 Modifier 를 사용하는 것도 정말 강력합니다.
  • 이미 CSS 존재하는 것들이지만 TailwindCSS Modifier 사용으로 보다 강력하고 간단하게 구현할 수 있습니다.

Modifiers for Forms

• <input> 태그 클래스네임에 required:bg-yellow-500, invalid:bg-yellow-500, placeholder-shown:bg-yellow-500 placeholder:text-green-400 등으로 태그 속성을 활용하여 CSS 를 적용할 수 있습니다.
• 각각의 기능들을 모두 외울필요는 없고 존재한다는 것을 알면 됩니다.

Peer(동료, 또래, 대등한 관계) Modifier**

• 사람들이 아주 많이 쓰는 패턴을 구현(implement) 해줍니다.
• 예를들어 <input> 이 invalid 일때만 보여주는 <span> 태그를 자바스크립트없이 없이 TailwindCSS 로만 구현할 수 있습니다.
  • sibling selector 가 활용됩니다.
  • css 가 Top to Bottom 으로 동작하기에 기준이 되는 peer 보다 peer modifier 를 사용하는 태그들이 위에 있으면 동작하지 않습니다.
• 예시 코드

<form className="flex flex-col space-y-2">
  <input
    type="text"
    required
    placeholder="Username"
    className="border p-1 peer border-gray-400 rounded-md"
  />
  <span className="peer-invalid:text-yellow-400  peer-valid:hidden">
    This input is invalid
  </span>
  <span className="peer-valid:text-green-400  peer-invalid:hidden">
    Awesome username
  </span>
  <span className="hidden peer-hover:block">Hello</span>
  <input type="submit" value="Login" className="bg-white" />
</form>