Tailwind CSS에서 선택한 텍스트 강조 표시를 사용하는 방법

이 섹션에서는 tailwind css에서 하이라이트 텍스트를 사용하는 방법을 살펴보겠습니다. Tailwind CSS 3을 사용하여 텍스트 색상을 강조 표시하고 텍스트 배경색을 강조 표시합니다.

예 1

Tailwind CSS 하이라이트 섹션 텍스트 색상.

<div class="max-w-xl selection:text-purple-900">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>

예 2

Tailwind CSS 하이라이트 섹션 배경색.

<div class="max-w-xl selection:bg-purple-600">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>

예 3

Tailwind CSS는 선택 배경색과 텍스트 색상을 강조 표시합니다.

<div class="max-w-xl selection:bg-purple-300 selection:text-purple-900">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>