Tailwind CSS Selection Cheatsheet

Complete reference for styling text selection with Tailwind's selection utilities.
Highlight the text in each example to see the effect. Click any card to copy the classes.

What is Selection Styling?

The selection: modifier in Tailwind CSS styles the ::selection pseudo-element, which controls how text appears when users highlight it with their cursor.

Available utilities:

- selection:bg-* - Background color of selected text
- selection:text-* - Text color of selected text

Quick Navigation

Vibrant Colors Light Colors Bold/Dark Interactive Builder Use Cases FAQ

Vibrant Selection Colors

Bold, eye-catching selection colors that make highlighted text stand out. Great for modern, colorful designs.

Blue

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-blue-500selection:text-white

Pink

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-pink-500selection:text-white

Green

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-green-500selection:text-white

Yellow

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-yellow-500selection:text-black

Purple

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-purple-500selection:text-white

Red

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-red-500selection:text-white

Orange

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-orange-500selection:text-white

Teal

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-teal-500selection:text-white

Indigo

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-indigo-500selection:text-white

Cyan

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-cyan-500selection:text-white

Emerald

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-emerald-500selection:text-white

Rose

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-rose-500selection:text-white

Light Selection Colors

Subtle, light backgrounds with darker text. Perfect for professional, minimalist designs.

Light Blue

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-blue-200selection:text-blue-900

Light Pink

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-pink-200selection:text-pink-900

Light Green

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-green-200selection:text-green-900

Light Yellow

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-yellow-200selection:text-yellow-900

Light Purple

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-purple-200selection:text-purple-900

Light Gray

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-gray-200selection:text-gray-900

Bold & Dark Selections

High contrast combinations including black, white, and dark neutrals.

Black

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-blackselection:text-white

White

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-whiteselection:text-black

Slate Dark

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-slate-800selection:text-slate-100

Zinc Dark

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-zinc-800selection:text-zinc-100

Neutral Dark

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-neutral-800selection:text-neutral-100

Stone Dark

Select this text to see the custom highlight color. Try dragging across these words!

selection:bg-stone-800selection:text-stone-100

Interactive Selection Builder

Choose your colors and try selecting the text below.

Background Color

Text Color

Try Selecting This Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

selection:bg-blue-500 selection:text-white

Common Use Cases

Global Selection Style

{/* Apply to body for site-wide effect */}
<body class="selection:bg-purple-500
  selection:text-white">
  ...
</body>

Brand-Colored Selection

{/* Match your brand colors */}
<article class="selection:bg-[#1DB954]
  selection:text-white">
  <h1>Spotify-style Selection</h1>
  <p>Select text to see the effect...</p>
</article>

Dark Mode Selection

<div class="selection:bg-blue-500
  selection:text-white
  dark:selection:bg-blue-400
  dark:selection:text-black">
  Different selection colors
  for light and dark modes.
</div>

High Contrast Selection

{/* For better accessibility */}
<main class="selection:bg-yellow-300
  selection:text-black">
  High contrast selection
  for better visibility.
</main>

Code Block Selection

<pre class="bg-slate-900 text-slate-100
  selection:bg-slate-600
  selection:text-white">
  <code>
    const hello = "world";
  </code>
</pre>

Hero Section Selection

<section class="bg-gradient-to-r
  from-purple-600 to-pink-600
  selection:bg-white/30
  selection:text-white">
  <h1>Welcome to our site</h1>
</section>

Custom Selection Colors

You can use any custom color with Tailwind's arbitrary value syntax:

<p class="selection:bg-[#1DB954] selection:text-white">
  Spotify-green selection!
</p>

Try selecting this text to see the Spotify-green selection color!

Arbitrary values let you use any valid CSS color format including hex, rgb, hsl, and CSS color names.

Frequently Asked Questions

What is the selection modifier in Tailwind CSS?

The selection modifier in Tailwind CSS allows you to style the ::selection pseudo-element, which controls how highlighted text appears when users select it. Use classes like selection:bg-blue-500 and selection:text-white to customize the selection appearance.

How do I change text selection color in Tailwind?

Add selection:bg-{color} and selection:text-{color} classes to your element. For example, <p class="selection:bg-pink-500 selection:text-white"> will give selected text a pink background with white text.

Can I apply selection styles globally in Tailwind?

Yes! Add selection utilities to your <body> or a parent container element. All child elements will inherit the selection styles. For example, <body class="selection:bg-purple-500 selection:text-white">.

What CSS properties can I style with Tailwind selection utilities?

The ::selection pseudo-element supports limited CSS properties: background-color (selection:bg-*), color (selection:text-*), and text-shadow. Most other properties like padding or border are ignored by browsers.

Does selection styling work in all browsers?

Yes, ::selection is well-supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Some older browsers may not support it, but it's a progressive enhancement that doesn't break functionality.

Can I use different selection colors for dark mode?

Absolutely! Combine the selection modifier with dark mode: dark:selection:bg-blue-400 dark:selection:text-black. This lets you define different highlight colors for light and dark themes.

Quick Reference Table

Class	CSS Output	Use For
`selection:bg-blue-500`	`::selection { background-color: #3b82f6; }`	Brand-colored selection
`selection:text-white`	`::selection { color: #fff; }`	Light text on dark selection
`selection:text-black`	`::selection { color: #000; }`	Dark text on light selection
`selection:bg-yellow-300`	`::selection { background-color: #fde047; }`	High contrast/accessible
`selection:bg-[#custom]`	`::selection { background-color: #custom; }`	Any custom color

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including selection utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →