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>
'프로그래밍 > CSS' 카테고리의 다른 글
| npx tailwindcss init -p 에러 (0) | 2025.03.17 |
|---|---|
| PostCSS란? (0) | 2025.03.03 |
| Tailwindcss - 지시어 Directives (base, components, utilities) (0) | 2024.03.05 |
| Tailwindcss - 개념 익히기 (0) | 2024.03.04 |
| [CSS] display 속성 / 반응형 웹페이지으로 만들때 꼭 알아야 할 CSS 옵션 (0) | 2022.08.02 |
