Hover Modifer 활용
- 컨터이너, 래퍼 박스에
group
클래스네임을 줍니다.
- 해당 박스에 Hover 되었을때 변화를 주고 싶은 태그 클래스네임에
group-hover:bg-red-300
과 같이 줍니다.
- 변화를 주고싶은 클래스네임에
transition-colors
를 적어주면 transition 도 적용됩니다.
Group
- 위의 간단한 hover 적용에서부터 아주 다양한 부분까지 기능을 제공합니다.
Form
에 Modifier
를 사용하는 것도 정말 강력합니다.
- 이미 CSS 존재하는 것들이지만 TailwindCSS Modifier 사용으로 보다 강력하고 간단하게 구현할 수 있습니다.
<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>