The selection: variant styles highlighted text: selection:bg-blue-500 selection:text-white.

Classes#

reference
js
<p class="selection:bg-fuchsia-300 selection:text-fuchsia-900">Highlight me</p>

Example#

example
html
<p class="selection:bg-fuchsia-300 selection:text-fuchsia-900">Highlight me</p>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Brand your selection color — subtle, delightful detail

colors/index|Text color · utilities/typography/font-size|Font size