Custom variants are being purged

[jplhomer]

Hello! I have defined some custom variants to integrate with a third-party UI library (Reach UI). These work just fine when developing locally, but in production, the custom variants get purged for some reason.

Here are the relevant parts of my tailwind.config.js:

module.exports = {
  variants: {
    backgroundColor: [
      // ...
      'aria-selected',
      'group-aria-selected',
      'selected',
      'group-selected',
    ],
    textColor: [
      // ...
      'aria-selected',
      'group-aria-selected',
      'selected',
      'group-selected',
    ],
    fontWeight: [
      // ...
      'aria-selected',
      'group-aria-selected',
      'selected',
      'group-selected',
    ],
    inset: [
      // ...
      'aria-selected',
      'group-aria-selected',
      'selected',
      'group-selected',
    ],
  },
  plugins: [
    require('@tailwindcss/ui'),
    plugin(function ({ addVariant, e }) {
      addVariant('aria-selected', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`aria-selected${separator}${className}`)}[aria-selected="true"]`;
        });
      });

      addVariant('group-aria-selected', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.group[aria-selected="true"] .${e(`group-aria-selected${separator}${className}`)}`;
        });
      });

      addVariant('selected', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`selected${separator}${className}`)}[data-selected]`;
        });
      });

      addVariant('group-selected', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.group[data-selected] .${e(`group-selected${separator}${className}`)}`;
        });
      });
    }),
  ],

  purge: {
    content: ['./components/**/*.js', './pages/**/*.js', './lib/**/*.js'],
    options: {
      // NOTE: tested just one variant below, but still did not save the variants from being purged
      whitelist: ['selected:text-teal-400', 'selected:font-semibold', 'selected:bg-gray-700'],
    },
  },

  /**
   * Preparing for Tailwind 2.0: https://tailwindcss.com/docs/upcoming-changes
   */
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
};

Here's an example of the variant being used:

export function MenuItem({ children, onClick, className, href, ...props }) {
  const classList = mergeClasses(
    'block py-2 px-4 cursor-pointer hover:text-teal-400 focus:text-teal-400 hover:font-semibold focus:font-semibold w-full text-left group hover:bg-gray-700 focus:bg-gray-700 selected:text-teal-400 selected:font-semibold selected:bg-gray-700',
    className,
  );

  if (href) {
    return (
      <MenuLink href={href} className={classList} {...props}>
        {children}
      </MenuLink>
    );
  }

  return (
    <ReachMenuItem onSelect={onClick} className={classList} {...props}>
      {children}
    </ReachMenuItem>
  );
}

Here's a screenshot of the correct data-selected attribute being added to the element with correct style being applied in development:

Here's a screenshot of the correct data-selected attribute being added to the element, but no style being applied in production:

Here is a link to repro: (dev mode - can't enable purge here) https://play.tailwindcss.com/jNNp5VPccj

Additional details

• Using Next.js
• I've tried escaping the : in the whitelist array, but no success
• I've tried adding plain selected to the whitelist array, but no success

Any thoughts?