@area17/a17-tailwind-plugins/src/PseudoElements/index.js

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

const pseudoElements = [
  'after',
  'backdrop',
  'before',
  'cue',
  'first-letter',
  'first-line',
  'grammar-error',
  'marker',
  'placeholder',
  'selection',
];

module.exports = function ({ addVariant, e }) {
  const escape = e || ((x) => x);
  pseudoElements.forEach((pseudo) => {
    addVariant(pseudo, ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.${escape(`${pseudo}${separator}${className}`)}::${pseudo}`;
      });
    });
  });
};