프로그래밍/CSS
Tailwindcss > peer
에그티비
2024. 9. 20. 15:08
peer 가 포커스 되었을때..
peer-focus:bg-pink-300
<input class="peer" />
<button class="peer-focus:bg-pink-300 peer-focus:text-white"></button>
js 스크립트로 해야 한는걸 간단하게 처리할 수 있음.
포커스 되는 요소를 peer 로 설정하고
반응하는 요소에는 peer-focus:~~ 로 처리하면 됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-xl mx-auto p-8">
<div class="flex flex-col gap-4">
<input
class="peer w-full rounded-lg bg-gray-100 p-2"
placeholder="Enter your email"
type="email"
/>
<button class="w-full rounded-lg bg-green-400 peer-focus:bg-pink-300 p-2">
Submit
</button>
</div>
</div>
</body>
</html>
