philippbosch / tailwindcss-selection-variant

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

tailwindcss-selection variant

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

Example

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.

Installation

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

License

MIT