1. 텍스트 선택 스타일링
활성 텍스트 선택을 selection 수정자를 사용하여 스타일링할 수 있다.
예시:
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>
So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers
a strange calm came over me. I don't know if it was divine intervention
or the kinship of all living things but I tell you Jerry at that moment,
I <em>was</em> a marine biologist.
</p>
</div>selection 수정자는 상속 가능하므로 트리의 어느 위치에든 추가할 수 있으며, 모든 하위 요소에 적용된다.
예시:
<html>
<head>
<!-- ... -->
</head>
<body class="selection:bg-pink-300">
<!-- ... -->
</body>
</html>2. 첫 줄 및 첫 글자 스타일링
블록 콘텐츠의 첫 줄을 first-line 수정자로, 첫 글자를 first-letter 수정자로 스타일링할 수 있다.
예시:
<p class="first-line:uppercase first-line:tracking-widest
first-letter:text-7xl first-letter:font-bold first-letter:text-white
first-letter:mr-3 first-letter:float-left
">
Well, let me tell you something, funny boy. Y'know that little stamp, the one
that says "New York Public Library"? Well that may not mean anything to you,
but that means a lot to me. One whole hell of a lot.
</p>3. 대화 상자 배경 스타일링
네이티브 <dialog> 요소의 배경을 backdrop 수정자를 사용하여 스타일링할 수 있다.
예시:
<dialog class="backdrop:bg-gray-50">
<form method="dialog">
<!-- ... -->
</form>
</dialog>
LG CNS 클라우드 엔지니어 / 웹 프론트엔드 개발자