Adding a ::selection variant to Tailwind

Adding variants to Tailwind is a piece of 🍰. Variants are a way to create custom pseudo-classes. Tailwind has the commonly used ones added by default, like hover and focus.

Let's explore how we can add one for the ::selection pseudo-class. The ::selection pseudo-class controls what happens to the element when you, well, select it. There are only three CSS properties that will work with ::selection.

• color
• background
• text-shadow

Add this snippet to add & enable the variant:

const plugin = require("tailwindcss/plugin");

module.exports = {
  variants: {
    extend: {
      // Enable the variant for the `backgroundColor` & `textColor` properties
      backgroundColor: ["selection"],
      textColor: ["selection"],
    }
  },
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant("selection", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`selection${separator}${className}`)}::selection`;
        });
      });
    }),
  ],
};

To use the variant you add the selection: prefix to the text and/or background color like so:

<p class="selection:bg-purple-900 selection:text-purple-600">Select me!</p>

Select me!

And that was it! I hope it was useful.