Adds a variant for selected text (::selection) to Tailwind CSS
npm install tailwindcss-selection-variantAdds a variant for targeting user-selected text ranges (::selection) to Tailwind CSS.
Given this HTML:
``html`
Lorem ipsum dolor sit amet
If the user selects parts of the text within this
the selection highlight rendered by the browser will be white text on red background.This is the relevant part of the generated CSS (simplified):
`css
.selection\:bg-red-500 ::selection {
background-color: #f56565;
}.selection\:text-white ::selection {
color: #fff;
}
`Requirements
This plugin requires Tailwind CSS v1.x.
Installation
shell
npm install --save-dev tailwindcss-selection-variant
`or
shell
yarn add --dev tailwindcss-selection-variant
`Usage
In your _tailwind.config.js_:
js
module.exports = {
// …
plugins: [
// …
require("tailwindcss-selection-variant")
// …
],
variants: {
textColor: [
// …
'selection',
],
backgroundColor: [
// …
'selection',
],
} // …
};
`Note
Not all CSS properties (and thus Tailwind utilities) can be used with