tsv

tailwindcss-selection-variant

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

Showing:

Popularity

Downloads/wk

108

GitHub Stars

7

Maintenance

Last Commit

5mos ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100