1. 기본 상호작용
hover: /* 마우스 오버 */
focus: /* 포커스 */
focus-visible: /* 키보드 포커스만 */
focus-within: /* 자신이나 자식 요소 포커스 */
active: /* 클릭/탭 하는 동안 */
visited: /* 방문한 링크 */
target: /* URL 해시와 일치하는 요소 */
2. 폼 관련
default: /* 기본 폼 요소 */
checked: /* 체크된 상태 */
indeterminate: /* 불확정 상태 */
placeholder: /* placeholder 텍스트 */
autofill: /* 자동완성된 입력 */
required: /* 필수 입력 필드 */
valid: /* 유효한 입력 */
invalid: /* 유효하지 않은 입력 */
in-range: /* 범위 내 값 */
out-of-range: /* 범위 외 값 */
read-only: /* 읽기 전용 */
3. 상태 / 환경
enabled: /* 활성화된 요소 */
disabled: /* 비활성화된 요소 */
readonly: /* 읽기 전용 */
open: /* 열린 details 요소 */
4 - 1. 예시 1
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Username</span>
<!-- Using form state modifiers, the classes can be identical for every input -->
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500
disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
"/>
</label>
<!-- ... -->
</form>
4 - 2. 예시 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS</title>
</head>
<body
class="bg-slate-900 h-screen flex flex-col justify-center items-center gap-y-6"
>
<button
class="text-white text-2xl px-8 py-4 border-2 rounded-s
border-white transition hover:shadow-lg
hover:shadow-slate-500 hover:-translate-y-1 hover:scale-105
active:bg-slate-500 active:text-slate-900"
>
Button
</button>
<form
class="flex flex-col gap-y-6 px-6 py-4 rounded
transition focus-within:shadow-xl
focus-within:shadow-slate-500
focus-within:scale-105
group"
>
<div class="flex flex-col gap-y-2">
<label class="text-white text-xl" for="name">Name</label>
<input
class="px-6 py-2 w-96 text-2xl rounded
focus:bg-slate-500 focus:text-white focus:outline-none"
type="name"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label class="text-white text-xl" for="cellphone">Cellphone</label>
<input
class="px-6 py-2 w-96 text-2xl rounded
disabled:bg-rose-500
disabled:cursor-not-allowed
disabled:opacity-50"
type="text"
disabled
/>
</div>
<div class="flex flex-col gap-y-2">
<label class="text-white text-xl" for="email">Email</label>
<input
class="px-6 py-2 w-96 text-2xl rounded outline-none
focus:bg-sky-500 focus:invalid:bg-red-400"
type="email"
/>
</div>
</form>
</body>
</html>
1. focus-within : 해당 요소 또는 자식요소에 포커스가 갔을 때
input 창이 포커싱 되었을 때 , label 같은 단일태그 하나 혹은 form 태그 전체에
효과를 줄 수 있습니다
여기서는 form 태그 전체에 그림자 효과와 105%의 크기 증가를 시켰습니다.
focus-within:shadow-xl
focus-within:shadow-slate-500
focus-within:scale-105
2. Disabled State
Cellphone Input 처럼 diabled 속성이 있을 때는
disabled:cursor-not-allowed
로 커서도 처리를 함께 해줍니다
3. Invalid State
input type 에 따라 자동 유효성검사를 해주는 html5 의 기능을 빌려
focus:invalid:bg-red-400
로 유효성이 틀릴 때는 별도의 input 색상을 지정해 줍니다
그 밖의 고려 요소
상태 결합: 여러 상태 클래스를 함께 사용합니다(예: hover:focus:bg-purple-500).
그룹 호버: 부모-자식 상호작용을 위해 group 및 group-hover: 클래스를 활용합니다.
<a href="#" class="group>
<div >
<svg class="stroke-sky-500 group-hover:stroke-white"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white">New project</h3>
</div>
<p class="text-slate-500 group-hover:text-white">Create a new project from a variety of starting templates.</p>
</a>
✅ 형제 요소에는 peer 를 사용해야 합니다.
<input type="email" class="peer">
<p class="peer-invalid:text-red-500">
이메일이 유효하지 않습니다
</p>
가상 요소: 고급 효과를 위해 상태 수정자와 함께 before: 및 after: 클래스를 사용합니다.
transition-all : 더 부드러운 다중 속성 전환을 위해 transition-all을 신중하게 사용합니다.
성능 문제를 일으킬 수 있는 애니메이션이나, 전환 효과 최적화, 복합 속성 변화에는
will-change 속성을 신중하게 사용합니다.
단, 필요한 경우에만 사용해야 하며 과하면 오히려 성능이 저하될 수 있습니다
변화가 예상되는 직전에 추가하고, 변화가 끝나면 제거하는 것이 좋습니다
.element {
will-change: transform;
will-change: opacity;
will-change: transform, opacity; /* 여러 속성 동시 지정 가능 */
}
'CSS > Tailwind' 카테고리의 다른 글
| [Tailwind] tailwind의 필수 라이브러리 clsx, tailwind-merge, cva (0) | 2025.02.05 |
|---|---|
| [Tailwind] Tailwind v4.0 마이그레이션 ( 다크모드 , 색상 재정의, transition-property 설정 등 ) - 번역글 (0) | 2025.01.29 |
