Adds a variant for targeting u

Adds a variant for targeting user-selected text ranges (::selection) to Tailwind CSS.

Given this HTML:

<div class="selection:bg-red-500 selection:text-white"> Lorem ipsum dolor sit amet </div>

If the user selects parts of the text within this <div> the selection highlight rendered by the browser will be white text on red background.

This is the relevant part of the generated CSS (simplified):

.selection\:bg-red-500 ::selection { background-color: #f56565; } .selection\:text-white ::selection { color: #fff; } Requirements

This plugin requires Tailwind CSS v1.x.

npm install --save-dev tailwindcss-selection-variant

or

yarn add --dev tailwindcss-selection-variant Usage

In your tailwind.config.js:

module.exports = { // … plugins: [ // … require("tailwindcss-selection-variant") // … ], variants: { extend: { textColor: [ "selection" ], backgroundColor: [ "selection" ], }, } // … }; Note

Not all CSS properties (and thus Tailwind utilities) can be used with ::selection. See the list of allowable properties on MDN

MIT